-webkit-line-clamp是目前唯一原生支持多行省略号的css方案，但仅限webkit/blink内核浏览器；必须配合display: -webkit-box、-webkit-box-orient: vertical、overflow: hidden及宽度约束才生效，firefox等不支持，无纯css跨浏览器方案。
多行省略必须用 -webkit-line-clamp，但只在WebKit内核生效
纯CSS实现多行文本溢出省略号，目前唯一原生支持的方案就是 -webkit-line-clamp。它不是标准CSS属性，而是WebKit/Blink内核（Chrome、Safari、Edge）的私有扩展，Firefox和旧版IE完全不识别。
要让它生效，三个配套属性缺一不可：
-
display: -webkit-box—— 必须设为弹性盒子旧语法，不能用flex或grid -
-webkit-box-orient: vertical—— 明确子元素垂直堆叠 -
-webkit-line-clamp: 2—— 整数，表示最多显示几行（比如2就是两行+省略号）
同时仍需 overflow: hidden，否则内容会撑开容器。宽度也得有约束（width 或 max-width），否则无法判断何时“溢出”。
-webkit-line-clamp 的常见失效原因
写对了属性却没效果？大概率是踩了这几个坑：
- 父容器或自身设置了
height或max-height，且值太小导致内容被裁剪但未触发省略逻辑（建议优先用line-height × 行数计算max-height，而非硬写像素值） - 元素是行内元素（如
span），没加display: block或inline-block，导致-webkit-box不起作用 - 用了
flex布局的父容器，子项默认min-width: auto，会阻止收缩——得加min-width: 0配合overflow: hidden - 在伪元素（
::before/::after）上尝试使用，无效；该属性只作用于真实元素节点
Firefox等非WebKit浏览器怎么处理？
没有纯CSS跨浏览器方案。所谓“纯CSS模拟”（比如靠 max-height + linear-gradient 遮罩）只是视觉欺骗，无法保证省略号精确出现在最后一行末尾，且换行位置受字体、字号、断词影响极大，真机测试常出错。
生产环境若必须兼容Firefox，务实做法是：
- 服务端截断：后端按字数或字符数提前截取，加
…（最稳定，但丢失响应式能力） - 轻量JS补丁：监听元素渲染后，用
getBoundingClientRect()和scrollHeight判断是否溢出，再手动截断+加省略号（推荐用clamp.js这类成熟库） - 接受降级：Firefox下显示完整多行（不省略），其他浏览器走
-webkit-line-clamp—— 多数业务场景可接受
为什么不用 text-overflow: ellipsis 直接配多行？
text-overflow: ellipsis 本身只对单行有效。它依赖 white-space: nowrap 来制造“一行内溢出”的条件；一旦允许换行（normal 或 pre-wrap），该属性就彻底失效——浏览器根本不会去计算“第N行末尾该不该加省略号”，这是CSS规范明确限定的行为。
所以看到有人写：
.broken {
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
}
这种写法在任何浏览器里都不会产生多行省略号，只会让文本正常换行，溢出部分静默裁剪。
真正复杂的点不在写法，而在于你是否清楚：这个效果本质上是WebKit的渲染捷径，不是CSS Layout的通用能力。一旦布局稍有变化（比如嵌套 transform、will-change，或启用某些CSS containment），-webkit-line-clamp 就可能突然失效，且无报错提示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
