-webkit-line-clamp仍是多行截断最轻量可控方案，但需搭配display:-webkit-box、-webkit-box-orient:vertical和overflow:hidden四属性共存，且firefox不支持省略号。
直接说结论：-webkit-line-clamp 目前仍是多行文本截断最轻量、最可控的方案，但它不是“开箱即用”，必须配齐四个关键 CSS 属性，且 Firefox 用户默认看不到省略号。
为什么 -webkit-line-clamp 必须搭配 display: -webkit-box 和 -webkit-box-orient: vertical
因为 -webkit-line-clamp 本身不生效——它只是个“计数器”，真正起作用的是 display: -webkit-box 搭配 -webkit-box-orient: vertical 构建的弹性盒垂直流。没有这两个，-webkit-line-clamp 就是无效声明。
-
display: -webkit-box是前提，不能用flex或grid替代 -
-webkit-box-orient: vertical必须写全，不能简写成vertical单独出现 - 三者缺一不可，漏掉任意一个，Firefox 和旧 Edge 里会整段文字撑开容器，Chrome/Safari 也可能不截断
text-overflow: ellipsis 在多行场景下是否必要
有必要，但仅在 WebKit 内核中才显示省略号；Firefox 完全忽略它，所以它不是“功能保障”，而是“视觉增强”。如果你只关心 Chrome/Safari 用户体验，加上它能让截断更明确；如果必须兼容 Firefox，就得另配 JS 方案或接受无省略号。
- 加了
text-overflow: ellipsis后，WebKit 下末尾字符会被替换成…（注意是 U+2026） - 不加它，WebKit 仍会截断，但末尾是硬切，可能停在单词中间，观感差
- 它对
overflow: hidden无依赖关系，但没overflow: hidden就不会隐藏溢出内容，所以必须共存
实际部署时容易漏掉的三个细节
很多项目上线后才发现文字撑破容器，问题往往出在这些“看似无关”的地方：
- 父容器没设
max-height或固定高度：即使用了-webkit-line-clamp，若容器高度由内容撑开，截断逻辑就失效 - 字体或行高动态变化（比如用户缩放、系统字体替换）：
-webkit-line-clamp按“行数”算，不是按像素，行高不稳会导致截断位置偏移 - 内容含
<br>
或内联块级元素（如<img>、<span></span>带display: inline-block）：这些会破坏-webkit-box的行计算，导致截断提前或失效
Firefox 兼容的最低成本 fallback 方案
不用重写整套 JS 截断逻辑，可以靠 CSS max-lines + line-clamp（标准属性）渐进增强。截至 2026 年 7 月，line-clamp 已被 Chrome 120+、Firefox 115+、Safari 17.4+ 原生支持，但旧版 Firefox（
- 优先写标准语法：
line-clamp: 2，再补私有前缀：-webkit-line-clamp: 2 - 同时保留完整配套：
display: flex不行，必须用display: -webkit-box+display: box（旧 Firefox 支持）+display: block（兜底） - 真正要命的是旧 Firefox（line-clamp 都不认，此时建议只做
max-height+overflow: hidden硬裁，不加省略号——比 JS 计算行高更稳定
真正麻烦的不是写法，而是“行数”这个抽象概念在不同设备、不同字体渲染下并不稳定；如果你的文本要精确控制到第 N 行结尾，-webkit-line-clamp 只能当作近似解，别指望它像素级对齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
