firefox不支持-webkit-line-clamp，因其仅为webkit/blink私有属性；自68版起仅支持无前缀line-clamp，且须配合display:block/inline-block、overflow:hidden及明确宽度，不可与flex/grid或-webkit-box共存。
-webkit-line-clamp 在 Firefox 里根本不会执行，不是写法问题，是浏览器压根不识别这个属性。 它只存在于 WebKit 和 Blink 内核（Chrome、Safari、Edge），Firefox 从没实现过 -webkit- 前缀的任何版本，也不支持旧版 display: -moz-box + -moz-line-clamp —— 那套语法早在 Firefox 68 就被彻底移除，现在写了也白写。
Firefox 68+ 支持的是无前缀 line-clamp，但有硬性限制
Firefox 自 68 起支持标准 line-clamp，但它和 -webkit-box 不共存：一旦你写了 display: -webkit-box，Firefox 就会忽略后续的 line-clamp 声明（哪怕带前缀或不带前缀）。必须改用标准盒模型：
-
display: block或display: inline-block（不能是flex、grid、-webkit-box） -
line-clamp: 3（无前缀，直接写） -
overflow: hidden（必需） - 容器需有明确宽度或受父级约束（否则行数计算失准）
为什么 display: -moz-box + -moz-line-clamp 现在完全失效
这不是配置错误，是历史兼容层已被删除：
-
display: -moz-box在现代 Firefox 中已退化为display: block，不再提供弹性布局能力 -
-moz-line-clamp在 MDN 上明确标记为 Deprecated，当前所有稳定版 Firefox（包括 120+）均不解析该属性 - DevTools 的 computed 栏里根本看不到它，连灰色禁用状态都不会出现——浏览器直接跳过整条声明
真正在 Firefox 里能跑通的兼容写法
别试图用前缀“骗过”Firefox。可靠路径只有两条：
- 对 Firefox 68+ 用户：用标准
line-clamp，同时确保外层不用flex或grid布局（否则line-clamp会被静默禁用） - 对旧版 Firefox（function clamp(el, lines = 2) { const lh = parseFloat(getComputedStyle(el).lineHeight) || 1.5; el.style.maxHeight = `${lh * lines}em`; el.style.overflow = 'hidden'; while (el.scrollHeight > el.clientHeight && el.textContent.length) { el.textContent = el.textContent.slice(0, -1); } if (el.textContent.length) el.textContent += '…'; }
最常被忽略的一点：即使你用上了 Firefox 支持的 line-clamp，只要父容器用了 display: flex 且未设 align-items: flex-start，子元素的截断就可能因高度压缩而失败——这和 WebKit 下的 -webkit-box 失效逻辑不同，但现象一样：文字照常撑开，省略号消失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
