firefox 125之前完全不支持-webkit-line-clamp，因其属webkit/blink私有属性；firefox（gecko）自68版起仅支持无前缀line-clamp，且需display:block/inline-block+max-height+overflow:hidden，而display:-webkit-box路径下该属性被直接忽略。
Firefox 125 之前完全不支持 -webkit-line-clamp，也不是“兼容性差”，而是压根不解析该属性；即使你写了 display: -webkit-box 和 -webkit-box-orient: vertical，它也当普通块渲染，overflow: hidden 只裁剪底部，不会触发省略号。
为什么 -webkit-line-clamp 在 Firefox 里完全无效
这不是写法错误，是内核能力边界问题：-webkit- 前缀属性只在 WebKit/Blink 引擎中被识别和执行。Firefox（Gecko）从 68 版起支持无前缀 line-clamp，但仅限于 display: block 或 inline-block 场景，且必须配合显式高度约束（如 max-height）和 overflow: hidden；而 display: -webkit-box 在 Firefox 中虽被解析，但 -webkit-line-clamp 会被直接忽略——这是设计如此，不是 bug。
-
@supports (display: -webkit-box)不可靠：Firefox 确实支持该声明，但它不联动截断逻辑 -
@supports (line-clamp: 3)也不行：对私有前缀属性返回false，检测失准 -
-moz-line-clamp从未被实现，Autoprefixer 也不会补这个前缀
真正可用的特性检测与分层写法
用 @supports (-webkit-line-clamp: 1) or (line-clamp: 1) 做条件加载最稳妥：前者覆盖 Chrome/Safari/Edge，后者仅 Firefox 125+ 支持（2024 年中发布，当前已稳定）。
- WebKit 浏览器走
display: -webkit-box路径，必须配-webkit-box-orient: vertical+overflow: hidden - Firefox 125+ 可走标准
line-clamp: 3，但不能和display: -webkit-box共存，否则整条规则失效 - 所有浏览器都必须有降级：至少用
max-height+overflow: hidden物理截断，防止布局崩塌 -
max-height: none必须在@supports块内覆盖掉降级样式，否则 WebKit 下会先按max-height截一次、再按line-clamp截一次，导致末行被切半
伪元素 fallback 的关键细节
当纯 CSS 截断不可用时，::after 模拟省略号是最轻量的视觉降级，但极易出错：
-
::after必须设position: absolute+bottom: 0; right: 0;，且background需与父容器背景色一致（否则边缘露白） - 不能依赖
text-overflow: ellipsis：它对多行无效，加了也没用 - 渐变遮罩（如
linear-gradient）在深色背景或字号缩放时容易生硬，慎用 - 若文本含
<strong></strong>等内联标签，-webkit-line-clamp本身可能截断异常，此时伪元素 fallback 反而更可控
容易被忽略的真机与响应式陷阱
iOS Safari 15.4–16.3 和部分安卓 WebView（如微信 X5 内核）存在渲染 bug：中英文混排时可能少截一行、省略号偏移或消失——模拟器测不出来，必须真机验证。
- 别只靠媒体查询改
-webkit-line-clamp值，必须同步调整max-height（例如line-height: 1.4em × 2 行 = max-height: 2.8em） - 小屏切单行时，要补
white-space: nowrap+text-overflow: ellipsis（单行专用组合） - 避免在
-webkit-line-clamp元素里嵌套<strong></strong>，它们可能干扰行盒生成 - 父容器若用
flex或grid，子元素不能再设display: -webkit-box—— 部分 Android WebView 会白屏或崩溃
真正麻烦的不是怎么写，而是得同时记住三套逻辑：WebKit 的私有路径、Firefox 125+ 的标准路径、以及所有浏览器都得兜底的物理截断。漏掉任意一层，上线后文字就全撑开。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
