多行文本省略必须用-webkit-line-clamp，但仅WebKit系浏览器支持；需配合display: -webkit-box和-webkit-box-orient: vertical，text-overflow: ellipsis对其无效；Firefox等需JS方案补位。
多行文本省略必须用 -webkit-line-clamp，但只在WebKit系浏览器生效
纯CSS实现多行省略没有跨浏览器的标准方案，-webkit-line-clamp 是目前唯一被广泛支持的原生方法，但它本质是WebKit私有属性，Chrome、Safari、Edge（基于Chromium）可用，Firefox 和旧版IE 完全不识别。
它必须和另外两个属性配合使用：display: -webkit-box 和 -webkit-box-orient: vertical。缺一不可，否则 -webkit-line-clamp 不起作用。
常见错误是只写 -webkit-line-clamp: 2 却忘了设 display 和 box-orient，结果文本照常换行、不截断、也不出省略号。
示例代码：
.multi-ellipsis {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
text-overflow: ellipsis 对多行无效，别指望它单独起作用
text-overflow: ellipsis 只对单行文本有效，前提是已设置 white-space: nowrap 和 overflow: hidden。一旦放开换行（比如用 white-space: normal），这个属性就彻底失效——即使你加了 -webkit-line-clamp，text-overflow 在多行场景下也仅是“装饰性存在”，删掉它样式照样跑。
所以别在多行省略里硬塞 text-overflow: ellipsis 并期待它贡献功能；它在这里只是历史沿用习惯，不是必需项。
容易踩的坑：
- 误以为
text-overflow是多行省略的核心，反复调试它的值 - 在 Firefox 中检查元素时发现没效果，却没意识到该属性本就不支持
- 把
word-break: break-all或hyphens: auto当成多行截断的替代方案——它们只影响断词，不控制行数或加省略号
Firefox 和部分旧环境只能靠 JavaScript 补位
如果你的项目必须支持 Firefox 或需要稳定跨浏览器行为，-webkit-line-clamp 就不够用了。这时候得换思路：用 JS 测量容器高度 + 文本行高，动态截断字符串并手动拼接省略号。
主流做法有两种：
- 用
line-height× 目标行数 算出最大允许高度，再用element.scrollHeight > maxHeight判断是否溢出 - 借助库如
clamp.js或dotdotdot（注意后者已多年未维护） - Vue/React 场景下更推荐封装 hook/composable，监听
ref元素变化后重算
关键点：JS 方案能精确控制“第几行结尾加…”，也能兼容点击展开逻辑，但会带来额外计算开销和首屏渲染延迟。
移动端要注意 -webkit-line-clamp 的行高继承问题
在 iOS Safari 或安卓 Chrome 上，如果父容器设置了 font-size 但没显式设 line-height，-webkit-line-clamp 可能按默认行高（通常是 1.2 或 1.4）计算，导致实际显示行数比预期少 0.5 行甚至错位。
解决办法很直接：
- 给目标元素加上明确的
line-height（推荐使用无单位数值，如line-height: 1.5） - 避免用
em或rem做line-height，防止嵌套缩放干扰 - 测试时用真机 Safari 调试，模拟器有时会掩盖行高计算偏差
这不是 bug，是 -webkit-line-clamp 依赖浏览器内部行盒测量逻辑导致的必然现象——它没标准，就注定要多调几次。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
