多行省略必须用 -webkit-line-clamp，但仅 webkit 内核支持；需同时满足 display: -webkit-box、-webkit-box-orient: vertical 和 overflow: hidden 三条件，firefox 无纯 css 方案，依赖服务端截断或 js 动态计算。
多行省略必须用 -webkit-line-clamp，但只在 WebKit 内核生效
-webkit-line-clamp 是目前唯一被广泛支持的原生多行截断方案，但它不是标准 CSS 属性。Chrome、Safari、新版 Edge 都能正常工作；Firefox 和旧版 IE 完全不识别，会静默忽略整套规则。
要让它起作用，三个条件缺一不可：
-
display: -webkit-box—— 必须用这个 display 值，flex或block都不行 -
-webkit-box-orient: vertical—— 方向必须设为 vertical，否则-webkit-line-clamp不触发 -
overflow: hidden—— 没它，溢出内容仍会显示
示例写法：
.multi-line {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
width: 300px;
}
Flex 容器里加 -webkit-line-clamp 会失效
如果父容器是 display: flex，子元素即使写了 display: -webkit-box，也可能因 flex 项默认的 min-width: auto 导致宽度撑开，从而绕过截断逻辑。
解决方法只有两个：
- 给子元素加
min-width: 0（推荐） - 或改用
width: 0; flex: 1强制收缩
错误写法：<div class="item">长文本</div> + .item { display: -webkit-box; ... }，但父级是 display: flex 且没设 min-width: 0 → 省略号不出现。
Firefox 下没有纯 CSS 多行省略方案
Firefox 不支持 -webkit-line-clamp，也不支持 line-clamp（该标准属性尚未落地）。试图用 text-overflow: ellipsis 配合 height + overflow: hidden 只会裁剪末尾，不保证断在字边界，更不会加省略号。
真实可用的替代路径只有两条：
- 服务端提前截断 + 加
…（最稳定，但无法响应窗口缩放） - 前端 JS 动态计算行高与字符数，截取后拼接省略号（如用
getClientRects()或RangeAPI）
注意：JS 方案需监听 resize，且字体变化、字号缩放都会影响行数判断——这点常被忽略。
text-overflow: ellipsis 本身不支持多行
很多人误以为只要把 white-space 改成 normal 或删掉，再配 text-overflow: ellipsis 就能多行省略——这是无效的。浏览器会直接忽略 text-overflow: ellipsis，因为该属性规范明确限定“仅适用于单行块容器”。
验证方式很简单：去掉 display: -webkit-box，保留其余所有样式，刷新页面——省略号立刻消失，文本照常换行溢出。
真正容易被忽略的点是：多行省略从来不是“CSS 能不能做”的问题，而是“你愿不愿意为 Firefox 单独处理”的问题。兼容性断层就在那里，绕不开。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
