-webkit-line-clamp在firefox中不生效，因其是webkit私有属性，firefox长期未支持；虽68+版本原生支持无前缀line-clamp，但旧版仍忽略该属性，且部分场景需配合display:-webkit-box等前提条件才生效。
直接说结论： -webkit-line-clamp 本身不跨浏览器，但可以通过 @supports 检测 + max-height 降级组合实现真正可用的兼容方案；Firefox 68+ 已原生支持该属性（无需标志），IE 全系不可用，Android 4.4 及更旧 WebView 会失效。
为什么 -webkit-line-clamp 在 Firefox 里有时不生效
早期版本（-webkit-line-clamp，无需开启任何 flag。如果你遇到不生效，大概率是以下原因：
- 漏写了
display: -webkit-box或-webkit-box-orient: vertical - 容器
width未显式设置（必须有明确宽度才能触发截断） - 父元素设置了
overflow: visible或position: static干扰了裁剪上下文 - 文本内嵌了
<br>
、inline-block元素或换行符，破坏了 -webkit-box 的行计算逻辑
Chrome/Safari/Edge 正常但 Firefox 显示不全？试试这个写法
不要只靠 @supports (-webkit-line-clamp: 3)，它在 Firefox 中返回 true 但实际可能因渲染路径差异表现不稳定。更稳妥的是用双层声明 + 显式重置：
.ellipsis-3 {
/* 基础降级：高度控制 */
line-height: 1.5em;
max-height: 4.5em; /* 3 × 1.5em */
overflow: hidden;
/* WebKit 增强（含现代 Firefox）*/
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
/* 关键：覆盖降级的高度限制 */
max-height: none;
}
注意：max-height: none 必须写在增强块里，否则 Firefox 会优先按 max-height: 4.5em 截断，导致省略号不出现。
Android WebView 和 iOS Safari 的隐藏坑
Android 4.4–6.0 的系统 WebView 对 -webkit-line-clamp 支持极差，即使检测通过也会随机多显示一行或完全不截断。iOS Safari（尤其 iOS 12–14）在 font-size 动态变化（如响应式 rem）时，-webkit-line-clamp 计算会失准。
- 对 Android 旧 WebView：强制启用降级方案，用
@supports not (line-clamp: 3)或 UA 字符串识别后加max-heightfallback - 对 iOS Safari：避免在
rem基准变化时复用同一 class；可改用固定em单位 +font-size: 1em锁定 - 所有场景下，
text-overflow: ellipsis必须和-webkit-line-clamp同时存在，否则 Safari 可能只裁剪不加省略号
最易被忽略的一点：伪元素 ::after 模拟省略号的方案，在深色背景或渐变背景上几乎无法可靠遮盖文字末尾——这不是 CSS 能解决的问题，而是设计约束。真要保底，就得接受「不显示省略号」或引入极简 JS 回退。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
