-webkit-line-clamp 是 WebKit 内核浏览器支持的非标准 CSS 属性，用于限制块级元素显示行数并添加省略号；必须配合 display: -webkit-box、-webkit-box-orient: vertical 和 overflow: hidden 才生效，Firefox 不支持且无纯 CSS 替代方案。
-webkit-line-clamp 是什么，它能做什么
-webkit-line-clamp 是一个 WebKit 内核浏览器（Chrome、Safari、Edge 新版本）支持的非标准 CSS 属性，用于限制块级元素显示的行数，并在末尾自动添加省略号。它本身不生效，必须配合 display: -webkit-box 和 -webkit-box-orient: vertical 才能起作用。
常见错误现象：只写 -webkit-line-clamp: 3，其他属性缺失 → 完全没效果
使用场景：标题、摘要、卡片描述等需“最多显示 N 行”的静态文本容器
兼容性影响：Firefox 不支持（需 JS 回退），IE 完全不支持；移动端 Safari 12+、Chrome 63+ 均可用
必需的三件套组合如下：
-
display: -webkit-box—— 启用弹性盒模型（WebKit 旧版 box 模型） -
-webkit-box-orient: vertical—— 声明子内容垂直排列（否则-webkit-line-clamp无效） -
-webkit-line-clamp: N—— 指定最大显示行数（N 为正整数）
同时必须加 overflow: hidden，否则超出部分会溢出可见区域。
完整可运行的 CSS 写法示例
以下是最小可行代码，适用于大多数现代浏览器：
.clamp-3 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
HTML 中直接使用即可：
立即学习“前端免费学习笔记（深入）”；
<p class="clamp-3">这是一段很长的描述文字，可能占据四到五行，但只会显示前三行，后面自动截断并加省略号。</p>
注意点：
- 该样式仅对块级元素有效（
<p>、<div>等），不能用于<span>等内联元素（除非显式设display: block） - 如果父容器有
height或max-height，且值过小，可能导致文字被裁切而非优雅省略（例如只显示半行） - line-height 过大会让实际显示行数少于预期（因为
-webkit-line-clamp按渲染行数计，不是按 font-size 计）
为什么有时候省略号不出现
这是最常被忽略的三个原因：
-
white-space被设为pre或pre-wrap→ 强制保留换行符，破坏-webkit-box的行高计算逻辑；应保持默认normal - 文本内含
<br>或多个连续空格/换行符 → 会干扰 WebKit 盒模型的行数判定；建议先 normalize 文本内容 - 容器宽度太窄或字体太大，导致第一行就溢出且无法折行 → 实际只渲染了 1 行，
-webkit-line-clamp: 3仍生效，但省略号出现在第一行末尾（视觉上像单行截断）
调试建议：临时加 border: 1px solid red 查看容器真实尺寸，再检查 computed styles 中 display 是否真为 -webkit-box，以及 -webkit-line-clamp 是否被覆盖。
Firefox 和旧浏览器怎么兼容
Firefox 完全不识别 -webkit-line-clamp，也不能用纯 CSS 模拟相同行为。目前可靠方案只有 JS 回退：
- 用
clientHeight与scrollHeight对比判断是否溢出 - 配合
getComputedStyle(el).lineHeight计算理论行高，推算最大允许字符数（精度低） - 更稳妥用现成库如
clamp.js或multiclamp（注意后者依赖 MutationObserver）
简单判断是否需要降级的逻辑：
if ('webkitLineClamp' in document.documentElement.style === false) {
// Firefox / IE → 手动截断或加载 polyfill
}
别指望用 @supports (-webkit-line-clamp: 1) 完全覆盖 —— 它在 Safari 15.4+ 才被支持，且无法触发回退样式块中的非前缀规则。
真正麻烦的不是写法，而是当设计要求「响应式行数」（比如小屏 2 行、大屏 4 行）时，-webkit-line-clamp 不支持媒体查询动态赋值，只能靠 JS 切换 class 或重设 style。
