Firefox 125前-webkit-line-clamp完全无效，必须用@supports检测+max-height回退；其生效需严格匹配行高×行数，且max-height须用em/rem单位、减去padding，并配合::after遮毛边。
-webkit-line-clamp 在 Firefox 125 之前完全无效，不能靠 UA 判断或 -moz-line-clamp 补救，必须用 @supports (-webkit-line-clamp: 1) 检测 + max-height 回退。
为什么 Firefox 里 -webkit-line-clamp 一直不生效
Firefox 直到 125 版本（2024 年中发布）才原生支持 -webkit-line-clamp。此前所有版本——包括 68+ 声称“支持 line-clamp”的阶段——都只是解析但忽略该属性。即使写了 display: -webkit-box 和 -webkit-box-orient: vertical，Firefox 仍按普通块级元素渲染，overflow: hidden 只会粗暴裁剪底部，不会触发省略号。
常见错误现象：text-overflow: ellipsis 在 Firefox 多行场景下彻底失效；控制台无报错，但文字直接溢出或断在字中间。
-
@supports (display: -webkit-box)不可用——Firefox 也支持该声明，但它不触发截断逻辑 -
@supports (line-clamp: 1)不可靠——私有属性检测返回false，且标准line-clamp属性至今未被广泛实现 -
-moz-line-clamp从未存在过，Autoprefixer 也不会加，纯属历史误解
怎么写才能让 Chrome/Safari/Firefox 都有合理表现
推荐分层写法：基础样式兜底，@supports 启用现代方案，避免属性冲突。
错误示范：display: -webkit-box; display: block 写在同一选择器里——后者必然覆盖前者，WebKit 浏览器也失效。
- 基础类只设
max-height、line-height、overflow: hidden和position: relative -
@supports (-webkit-line-clamp: 1)块内重置display、添加-webkit-box-orient和-webkit-line-clamp，并设max-height: none防止高度冲突 - 不要在
@supports块里重复写overflow或text-overflow，基础类已覆盖
示例：
.clamp-3 {
line-height: 1.5em;
max-height: 4.5em; /* 1.5em × 3 */
overflow: hidden;
position: relative;
}
@supports (-webkit-line-clamp: 1) {
.clamp-3 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
max-height: none;
}
}
max-height 回退方案的关键细节
这个方案不是“差不多就行”，max-height 值必须严格匹配行高 × 行数，否则可能多露半行或少截一行；::after 也不是装饰，是遮毛边用的。
-
max-height必须用em或rem单位（避免字体缩放破坏计算），不能用px（响应式下失效） -
::after的background必须和容器背景色完全一致，否则会漏出残影字符 - 如果容器有 padding，
max-height要减去上下 padding，否则实际可显示区域变小 - 伪元素
bottom: 0; right: 0;需配合padding-right或transform微调位置，避免省略号贴边难读
要不要用 JS 检测？什么情况下值得
纯 CSS 方案已足够覆盖绝大多数场景。JS 检测仅在以下情况必要：
- 需要动态控制行数（比如用户滑动调节“显示 2/3/4 行”）
- 内容高度变化频繁（如展开/收起、字体加载完成前后的 reflow）
- 服务端渲染需提前判断客户端能力，避免 FOUC
JS 检测应优先用 getComputedStyle(el).webkitLineClamp !== undefined，而不是查 navigator.userAgent——后者在 Firefox 125+ 和新版 Safari 中已不可靠。
真正容易被忽略的是：Firefox 125+ 虽支持 -webkit-line-clamp，但若页面启用了 font-display: optional 且字体加载延迟，line-clamp 可能因初始 font-size 计算偏差而截错行——这时回退的 max-height 反而是更稳的选择。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
