text-overflow: ellipsis仅支持单行截断，多行需用-webkit-line-clamp配合display: -webkit-box、-webkit-box-orient: vertical、overflow: hidden实现；该方案在Chrome/Edge/Safari及Firefox 125+中可用，但存在布局兼容性、高度不可控及中英文混排等边界问题。
text-overflow: ellipsis 只对单行生效，多行必须换思路
text-overflow: ellipsis 本身不支持多行截断，这是最常被误解的一点。它只在满足 white-space: nowrap + overflow: hidden + 固定宽度 的单行场景下起作用。想实现两行、三行甚至更多行的省略，得绕过这个限制，用更可控的方式模拟。
-webkit-line-clamp 是目前最实用的多行省略方案
虽然属于 WebKit 私有属性，但现代 Chrome、Edge、Safari（包括 iOS）均已稳定支持，Firefox 从 125 版本起也已原生支持。关键是要配齐以下四点：
-
display: -webkit-box：启用弹性盒旧语法，为-webkit-line-clamp提供基础环境 -
-webkit-box-orient: vertical：指定排列方向为垂直，否则行数限制无效 -
-webkit-line-clamp: 2（或你需要的行数）：真正控制显示几行，超出部分被截断并加省略号 -
overflow: hidden：隐藏溢出内容，否则省略号可能不出现或布局错乱
示例：
.clamp-2 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
纯 CSS 多行省略的兼容性与边界问题
这个方案不是万能的，容易踩坑的地方很具体：
- 不能和
flex或grid的现代布局混用——display: -webkit-box会覆盖它们，需确保父容器未强制设置冲突的 display 值 - 高度不可预测：如果字体大小、行高、字间距变化，实际截断位置可能偏上或偏下，建议配合
line-height和固定font-size使用 - 中文标点或全角空格可能导致最后一行末尾多出空白，可加
word-break: break-word或overflow-wrap: break-word辅助对齐 - Firefox 125+ 支持，但低于该版本仍需 JS 回退（如计算 scrollHeight 与 clientHeight）
不要依赖 title 属性做 hover 提示来“补救”省略
很多人给省略文本加 title 属性，指望用户 hover 看全文。这在移动端基本失效（无 hover），且对屏幕阅读器不友好，还可能触发重复提示。真需要完整展示，应该：
- 提供显式操作入口，比如「展开」按钮，配合 JS 切换 class 控制
max-height或display - 避免在卡片流、列表项中滥用多行省略——行数越多，截断越不可控；两行是较稳妥的上限
- 注意中英文混排时，英文单词可能因未断行导致提前截断，此时
hyphens: auto或word-break: break-word比单纯依赖-webkit-line-clamp更可靠
多行省略看着简单，实际是字体渲染、布局模型和浏览器私有特性的交界地带，最稳的做法永远是：先测真实设备，再决定用 CSS 还是 JS 回退。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
