Firefox 直到版本 159（2026年10月发布）才通过启用标准属性 line-clamp 正式支持多行文本截断，此前所有版本（含ESR）均完全忽略 -webkit-line-clamp。
CSS -webkit-line-clamp 在旧版 Firefox 中不生效，是因为它压根就不是标准属性，而是 WebKit 内核（Safari、Chrome 早期）的私有前缀实现，Firefox 从未支持过 -webkit-line-clamp。
Firefox 从什么时候开始支持行数截断？
Firefox 直到 版本 159（2026 年 10 月发布） 才通过启用 line-clamp 标准属性正式支持多行文本截断。在此之前，所有低于 159 的 Firefox 版本（包括 ESR 长期支持版）均无视 -webkit-line-clamp，也不会 fallback 到任何行为——它只是被完全忽略。
- Firefox 158 及更早：写
-webkit-line-clamp: 3完全无效，文本照常换行溢出 - Firefox 159+：支持标准属性
line-clamp: 3，且无需前缀 - 注意：
line-clamp依赖display: -webkit-box+-webkit-box-orient: vertical这套组合，Firefox 159 同时支持该 display 模式
旧版 Firefox（-webkit-line-clamp 的可行方案
没有完美等价的纯 CSS 方案，但可根据场景选最务实的降级路径：
- 用 JavaScript 截断：获取元素
offsetHeight或逐行测量getClientRects()，手动截断文本并加“…”。适合内容静态、行高固定、性能要求不高的列表项 - 服务端预截断：后端按指定字数 + 行高估算截断，返回带省略号的字符串。避免前端计算，兼容性 100%
- 放弃截断，改用「展开/收起」交互：用
max-height+transition控制折叠，点击再展开全文。语义清晰，无兼容问题 - 慎用伪元素模拟：例如
::after { content: "…"; position: absolute; right: 0; bottom: 0; }，但无法精确控制行数，且易与背景/文字重叠
为什么不能只加 -moz-line-clamp？
因为 Firefox 从未实现过 -moz-line-clamp —— 这个属性名在 Mozilla 的 Bugzilla 和源码中都不存在。网上某些博客写的 -moz-line-clamp 示例，要么是误传，要么是混淆了其他实验性属性（如旧版 -moz-binding）。直接写它不会触发任何行为，也不会报错，只是白写。
真正要注意的是：即使你写了全套前缀（-webkit-line-clamp / -moz-line-clamp / line-clamp），Firefox
Firefox 159 是第一个也是目前唯一支持 line-clamp 的稳定版，如果你的用户还在用旧版 Firefox，别指望 CSS 能自动搞定；优先考虑 JS 截断或交互式展开，比硬扛一个不存在的前缀更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
