-webkit-line-clamp 是 webkit/blink 专属属性，firefox（gecko 内核）原生不支持；需配合 display: -webkit-box、-webkit-box-orient: vertical 和 overflow: hidden 才生效，单独使用无效。
为什么 -webkit-line-clamp 在 Firefox 里完全不生效
因为 -webkit-line-clamp 是 Webkit/Blink 专属的非标准属性，Firefox（Gecko 内核）原生不支持。强行写上只会被忽略，控制台也不会报错，容易误以为是样式没生效——其实是根本没进浏览器的渲染逻辑。
如果你的项目必须兼容 Firefox，得换思路：要么用 JavaScript 动态截断+加省略号，要么改用更通用的 display: -webkit-box + text-overflow: ellipsis 组合（但注意，这套本身也依赖 Webkit 行为，Firefox 仍需 fallback）。
-webkit-line-clamp 必须配合哪些样式才能起作用
单独写 -webkit-line-clamp: 2 是无效的。它只是“开关”，背后需要一整套 Webkit 盒模型约束：
-
display: -webkit-box—— 启用 Webkit 的弹性盒（不是标准display: flex） -
-webkit-box-orient: vertical—— 指定子元素垂直排列 -
overflow: hidden—— 隐藏超出部分，否则省略号不会显示
漏掉任意一条，-webkit-line-clamp 就形同虚设。常见错误是只写了 line-clamp 和 overflow，忘了 -webkit-box 这层“容器协议”。
多行省略在不同场景下的表现差异
这个方案对纯文本最友好，但遇到内联元素（比如 <span></span>、<em></em>）、换行符 \n 或富文本 HTML 片段时，行为不可控：
- 含
<br>的内容可能提前截断，或省略号出现在换行位置而非末尾 - 行高（
line-height）和字体大小变化时，实际显示行数可能浮动 ±1 行（尤其小字号+大行高） - 英文单词不断行（
white-space: nowrap或长 URL）会导致单行撑满，line-clamp失效
如果内容结构复杂，建议服务端预处理截断，或用 max-height + overflow: hidden 配合 JS 计算真实行数——虽然重一点，但可控。
替代方案：纯 CSS 兼容性更强的写法
如果你只要 2～3 行省略，且能接受轻微布局限制，可以用 line-height × max-height 模拟：
.clamp-2 {
display: block;
line-height: 1.5;
max-height: 3em; /* 2 行 × 1.5 = 3em */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
注意：max-height 值必须严格匹配行高 × 行数，否则 Firefox 下会显示不全或留白。这个写法本质是“双保险”：Webkit 走 -webkit-line-clamp，其他浏览器靠 max-height 截断+text-overflow（仅限单行），所以真正跨浏览器可靠的多行省略，还是得靠 JS。
最常被忽略的是字体加载时机——Webfont 加载完成前，浏览器按 fallback 字体计算行高，可能导致截断错位。加 font-display: optional 或用 @font-face 的 size-adjust 微调，能缓解这个问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
