-webkit-line-clamp在Firefox中不生效，因其为WebKit私有属性，需搭配display: -webkit-box和-webkit-box-orient: vertical使用，且必须设置overflow: hidden才能正确裁剪并显示省略号。
为什么-webkit-line-clamp在Firefox里不生效
因为-webkit-line-clamp是WebKit内核专属属性，Chrome、Safari支持，Firefox和IE完全无视。它本质是display: -webkit-box的配套控制项，不是标准CSS，所以跨浏览器时必须有降级方案。
常见错误是只写-webkit-line-clamp却忘了前置的display: -webkit-box和-webkit-box-orient: vertical，三者缺一不可：
text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
-webkit-line-clamp必须搭配overflow: hidden吗
必须。没有overflow: hidden，超出行数的文本只是被“裁切”但依然占据布局空间，视觉上看不到省略号，甚至可能撑开容器。
还要注意几个隐性依赖条件：
-
height或max-height最好显式设置（尤其在Flex/Grid子项中，否则-webkit-box可能无法正确计算行高） - 父容器不能有
overflow: visible（会覆盖子元素的hidden） - 避免同时使用
text-overflow: ellipsis——它只对单行有效，和-webkit-line-clamp混用无意义
如何让多行省略在非WebKit浏览器里也工作
纯CSS无解，得靠JS兜底。核心思路是：先用getComputedStyle拿到行高，再用scrollHeight对比容器高度，超了就截断+加…。
简单实操建议：
- 优先用
line-clamp写基础样式，给WebKit用户原生体验 - 用
@supports not (-webkit-line-clamp: 1)包裹JS逻辑，避免重复执行 - 截断时按字符数试探不如按“渲染后高度”判断可靠；可先设
word-break: break-word保证换行一致 - 注意动态内容（如Vue/React组件更新后）要重新触发检测
使用-webkit-line-clamp时容易忽略的布局陷阱
它对父容器的布局模型很敏感，稍不注意就会失效：
- 在
flex容器中，如果子项没设flex-shrink: 0或min-width: 0，文本可能被压缩导致换行异常 - 遇到
transform、position: absolute等脱离文档流的父级，-webkit-box的行高计算常出错 - 字体加载完成前（
font-display: swap）可能造成初始行高误判，建议配合font-display: optional或延迟初始化
最稳妥的做法：把需要省略的文本包进一个独立，仅对该元素启用-webkit-box，其他样式尽量隔离。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
