Firefox不支持-webkit-line-clamp因其是WebKit/Blink私有属性且未进标准规范；它直接忽略该属性，导致多行文本不截断、布局错乱；可用-moz-line-clamp（旧版）、JS动态截断或ResizeObserver+字体加载完成后再处理。
Firefox 不支持 -webkit-line-clamp 的根本原因
Firefox 从一开始就没实现 -webkit-line-clamp，这不是 bug，是明确的不支持——它属于 WebKit/Blink 专属私有属性，连规范都没进。你写上去了，Firefox 直接忽略，不会报错，也不会 fallback，文字就原样铺开。
常见错误现象：line-clamp 在 Chrome/Edge 正常截断，Firefox 里整段文字全量显示，容器高度撑开，布局错乱。
使用场景：卡片标题、评论摘要、列表项多行文本截断，且需兼容 Firefox（尤其企业内网、教育系统等 Firefox 使用率仍不可忽略的环境）。
用 display: -moz-box + -moz-line-clamp 做有限兼容
Firefox 曾短暂支持过自己的老版本语法，现在仅在部分旧版本（如 Firefox 不要依赖它，写了也白写。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 别查 MDN 上“
-moz-line-clamp”文档并尝试启用——它早已标记为 Deprecated - 别用
display: -moz-box模拟弹性布局来凑合——现代 Firefox 已不识别该 display 值，会退化为display: block - 如果项目必须支持 Firefox 67 及更早版本，可加一段带前缀的降级规则，但需明确标注“仅限历史兼容”，并尽快推动用户升级
真正可靠的方案：JavaScript + 高度裁剪 + overflow: hidden
当 CSS 截断失效时，靠 JS 控制内容长度最可控。核心思路不是数行高，而是固定容器 max-height，再用 JS 截掉超出部分并补省略号。
关键点：
- 给容器设固定
line-height和max-height（例如 1.5em 行高 × 3 行 =max-height: 4.5em） - 用
element.scrollHeight > element.clientHeight判断是否溢出 - 逐字符或逐词删减文本，直到
scrollHeight ≤ clientHeight，再拼"…" - 避免用
offsetHeight或getBoundingClientRect()做判断——它们受 box-sizing、border、padding 影响，易误判
示例逻辑（简化）：
function clampText(el, lines = 3) {
const lineHeight = parseFloat(getComputedStyle(el).lineHeight) || 1.5;
const maxHeight = lineHeight * lines + 'em';
el.style.maxHeight = maxHeight;
el.style.overflow = 'hidden';
<p>while (el.scrollHeight > el.clientHeight && el.textContent.length > 0) {
el.textContent = el.textContent.slice(0, -1);
}
if (el.scrollHeight > el.clientHeight) el.textContent += '…';
}为什么不用纯 CSS 的 text-overflow: ellipsis 多行？
text-overflow: ellipsis 只对单行生效，这是规范限定的。你想强行套在多行上，哪怕加上 display: -webkit-box，Firefox 依然无视——因为 -webkit-box 是 WebKit 私有 display 值，Firefox 不解析，直接当无效值丢弃。
性能与兼容性影响：
- CSS 方案（
-webkit-line-clamp）零 JS 开销，但 Firefox 完全不可用 - JS 方案有重排风险，但可节流、只在初始化和 resize 时运行；现代 DOM API（如
ResizeObserver）已足够轻量 - 若项目已用 React/Vue，优先封装成自定义 hook 或指令，避免重复逻辑
容易被忽略的是：字体加载延迟会导致第一次计算时行高不准，scrollHeight 偏小，截断提前。务必等 font-display: swap 的字体加载完成后再执行 clamp，或监听 document.fonts.ready。
