在网页布局过程中，当文本内容长度超过容器预设高度时，我们往往需要控制文字显示的行数，将超出部分用省略号替代，避免破坏页面整体排版。webkit-line-clamp就是实现这一需求常用的属性，它是WebKit内核浏览器支持的私有CSS属性，能够直接指定文本显示的最大行数。
webkit-line-clamp基础用法
使用webkit-line-clamp属性时，需要搭配其他几个CSS属性共同生效，单独设置该属性无法实现截断效果。具体需要满足的条件如下：
- 元素必须是块级元素或者行内块元素
- 设置display属性为-webkit-box，同时指定-webkit-box-orient为vertical
- 设置overflow属性为hidden，避免超出内容继续显示
- 通过-webkit-line-clamp指定需要显示的最大行数
基础代码示例
以下是一个简单的实现多行文本截断的CSS代码：
/* 容器样式 */
.text-container {
width: 300px;
display: -webkit-box; /* 必须设置为webkit-box */
-webkit-box-orient: vertical; /* 设置子元素垂直排列 */
-webkit-line-clamp: 3; /* 限制显示3行 */
overflow: hidden; /* 隐藏超出内容 */
text-overflow: ellipsis; /* 超出部分显示省略号 */
line-height: 24px; /* 行高，可根据需求调整 */
}
/* HTML结构 */
<div class="text-container">
这是一段很长的测试文本，用于展示webkit-line-clamp属性的效果。当文本内容超过三行时，超出部分会被隐藏，并且末尾会显示省略号，保证页面布局的整洁性。
</div>
兼容情况说明
webkit-line-clamp是WebKit内核浏览器的私有属性，目前Chrome、Safari、Edge（Chromium内核版本）等浏览器都支持该属性，但是Firefox和IE浏览器并不支持。如果项目需要兼容非WebKit内核的浏览器，就需要考虑其他替代方案。
其他多行文本截断方案
方案1：使用line-clamp标准属性
CSS Overflow Module Level 3规范中定义了标准的line-clamp属性，用法和webkit-line-clamp类似，但是目前浏览器支持度还不如私有属性，代码示例如下：
.text-container {
width: 300px;
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
line-clamp: 3;
-webkit-line-clamp: 3;
overflow: hidden;
text-overflow: ellipsis;
}
方案2：JavaScript计算截断
通过JavaScript计算文本的行数，当行数超过限制时，逐步截断文本直到符合要求，这种方案兼容性最好，但是性能开销相对较大，适合文本内容不频繁变动的场景。示例代码如下：
function clampText(element, maxLine) {
const lineHeight = parseInt(window.getComputedStyle(element).lineHeight);
const maxHeight = lineHeight * maxLine;
// 如果当前高度已经超过最大高度，开始截断文本
while (element.scrollHeight > maxHeight && element.textContent.length > 0) {
element.textContent = element.textContent.slice(0, -1);
}
// 添加省略号
if (element.textContent.length > 0) {
element.textContent += '...';
}
}
// 调用方法
const textElement = document.querySelector('.text-container');
clampText(textElement, 3);
注意事项
使用webkit-line-clamp时需要注意，-webkit-box-orient属性在部分构建工具（如webpack）压缩CSS时可能会被移除，导致属性失效，此时可以通过注释的方式避免被压缩，或者使用内联样式设置该属性。另外，如果文本内容中包含换行符，webkit-line-clamp会按照实际渲染的行数计算，不会忽略换行。
HTML5webkit-line-clamp文字行数溢出文本截断修改时间：2026-06-28 16:18:34