text-overflow: ellipsis仅对单行生效，多行截断须用-webkit-line-clamp或line-height×行数+overflow:hidden控高；前者需display:-webkit-box、-webkit-box-orient:vertical等组合，后者兼容性更好且无需省略号。
直接说结论：text-overflow: ellipsis 只对单行生效，多行截断必须绕开它；想干净裁掉多余文本不加省略号，得靠 line-height × 行数 + overflow: hidden 精确控高。
为什么 text-overflow: ellipsis 在多行里不工作
很多人试过给 display: -webkit-box 元素加 text-overflow: ellipsis，发现要么没反应，要么只在第一行末尾出点，根本不是预期的“第 N 行末尾加…”。这是因为 text-overflow 是个单行属性——它只作用于块级容器的**最后一行内联内容末端**，而 -webkit-line-clamp 的截断发生在盒模型布局阶段，和 text-overflow 的触发时机、作用域都不匹配。
常见错误现象：
- 写了
-webkit-line-clamp: 2却没加-webkit-box-orient: vertical→ 完全不截断 - 加了
text-overflow: ellipsis但容器用了display: block→ 省略号消失（因为非内联上下文） - 在 Firefox 或旧版 Edge 里用
-webkit-前缀 → 属性被忽略，文本溢出无约束
用 line-height 和 max-height 实现无省略号截断
这是目前最可靠、兼容性最好、且不依赖前缀的方案。核心是让容器“刚好装下 N 行”，多出来的直接被 overflow: hidden 吃掉。
实操要点：
-
line-height必须是固定值（如1.4em或20px），不能用normal或百分比（否则无法精确计算） -
max-height=line-height× 行数，例如 3 行 ×1.5em=4.5em - 必须设
overflow: hidden，否则高度限制无效 - 避免设
height（会强制拉伸/压缩，破坏行高一致性）
示例：
.truncate-3lines {
line-height: 1.5em;
max-height: 4.5em;
overflow: hidden;
}
WebKit 方案怎么用才不出错
如果你只要支持 Chrome/Safari/新版 Edge，-webkit-line-clamp 是最简洁的选择，但它有硬性前提：
- 必须同时声明：
display: -webkit-box、-webkit-box-orient: vertical、overflow: hidden -
-webkit-line-clamp值必须是整数，不能是变量或 calc() - 不要加
text-overflow: ellipsis—— 它不仅没用，还可能干扰渲染（尤其在字体加载未完成时） - 如果父容器有
padding或border，要确保box-sizing: border-box，否则实际可用高度会变小
示例：
.truncate-webkit-2 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
Firefox 和老旧浏览器的降级处理
Firefox 直到 120+ 版本仍不支持 -webkit-line-clamp，也不能用 text-overflow 多行。此时只能靠 max-height + ::after 伪元素模拟视觉收口，但要注意：
-
::after覆盖区域必须精准对齐底部，否则会遮住最后一行文字 - 渐变背景（
linear-gradient）只是视觉欺骗，不能真正“截断”文本，仅适合对语义要求不高的展示场景 - 如果内容需要可复制、可搜索、无障碍访问，伪元素方案会破坏语义（屏幕阅读器可能读到“…”）
- 动态字体大小（如 rem 随根字号变化）会让
max-height计算失效，需配合 CSS 自定义属性 +calc()动态更新
真正复杂的地方在于：你永远不知道用户用什么设备、什么浏览器版本、是否开了系统字体缩放。所以最稳的做法是——把 max-height 方案当基线，-webkit- 当增强，不强求所有环境表现一致。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
