多行文本省略唯一原生css方案是-webkit-line-clamp，需配合display:-webkit-box和-webkit-box-orient:vertical使用；text-overflow:ellipsis对多行无效，firefox不支持该方案，兼容时需js或服务端降级。
多行文本省略必须用 -webkit-line-clamp
纯 CSS 实现多行文本截断并显示省略号，目前唯一可行的原生方案就是 -webkit-line-clamp。它不是标准 CSS 属性，但已被 Chrome、Safari、Edge（基于 Chromium）和绝大多数安卓 WebView 广泛支持。Firefox 仍不支持，这点必须提前确认。
关键点在于：这个属性必须和另外两个声明配合使用，缺一不可：
-
display: -webkit-box—— 把容器变成弹性盒子（注意不是flex） -
-webkit-box-orient: vertical—— 指定子元素垂直堆叠 -
-webkit-line-clamp: 3—— 数字表示最多显示几行（比如2就是两行）
示例样式：
.multi-ellipsis {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
text-overflow: ellipsis; /* 这行对多行无效，但建议保留，不影响渲染 */
}
text-overflow: ellipsis 对多行不起作用
很多人误以为只要加了 text-overflow: ellipsis 就能实现多行省略，其实它只在单行场景下生效。多行时即使写了这行，浏览器也完全忽略——因为 text-overflow 的设计初衷就是处理「行内方向溢出」，而多行截断本质是「块级方向的高度控制」。
所以别指望靠 white-space: normal + overflow: hidden + text-overflow: ellipsis 组合来搞定多行。这种写法只会让文字在容器内自然换行，超出部分被粗暴裁掉，末尾不会出现省略号。
为什么不能只用 max-height + overflow: hidden
有人尝试用固定高度限制 + 隐藏溢出内容来模拟多行省略，比如：
.fake-ellipsis {
max-height: 3.6em; /* 假设 line-height: 1.2，3 行 ≈ 3.6em */
overflow: hidden;
}
问题很明显：
- 文字可能在单词中间被截断，视觉突兀
- 末尾没有省略号，用户无法感知“还有内容”
- 响应式场景下
line-height或字体缩放会破坏截断位置 - 不同字号、不同语言（如中英文混排）导致行高计算不可靠
Firefox 和旧版 IE 怎么办
如果你的项目必须兼容 Firefox 或 IE，-webkit-line-clamp 就不能单独用。这时候得上 JS 方案，比如：
- 用
getBoundingClientRect()+textContent逐字/逐词试探截断点 - 引入轻量库如
clamp.js（仅 1KB）或 Vue/React 生态里的vue-ellipsis、react-lines-ellipsis - 服务端预处理：后端按字符数或字节数截取 + 添加「…」，再传给前端（适合静态卡片类场景）
真正容易被忽略的是：多行省略不是“有没有省略号”的问题，而是“用户是否明确感知到内容被截断、且有意愿点击展开”。如果交互链路缺失（比如没配「展开」按钮），再漂亮的省略号也只是个视觉装饰。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
