text-overflow: ellipsis 仅对单行生效，多行需用 -webkit-line-clamp；其要求 display: -webkit-box、-webkit-box-orient: vertical、整数行数及明确高度限制，且仅 WebKit/Blink 内核支持，Firefox 等需降级处理。
text-overflow: ellipsis 只对单行生效，多行必须换方案
text-overflow: ellipsis 本身不支持多行截断，CSS 规范里它只作用于 white-space: nowrap + overflow: hidden 的单行块。强行给多行元素加 text-overflow: ellipsis 不会报错，但也不会显示省略号——这是最常见的误用起点。
-webkit-line-clamp 是目前最实用的多行截断方案
虽然属于非标准属性（仅 WebKit/Blink 内核支持），但 -webkit-line-clamp 在 Chrome、Safari、Edge（新版）中稳定可用，且写法简洁：
.clamp-3 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
关键点：
-
display: -webkit-box是前提，不能用flex或block -
-webkit-box-orient: vertical必须显式声明，否则-webkit-line-clamp无效 - 行数必须是整数，不支持小数或响应式值（如
calc()） - 父容器需有明确高度或最大高度限制，否则可能不触发截断
纯 CSS 多行省略的兼容性妥协点
Firefox 和旧版 Edge 不支持 -webkit-line-clamp，若需覆盖这些环境，只能降级处理：
立即学习“前端免费学习笔记（深入）”；
- 用 JavaScript 计算字符数/高度后截断（注意中英文、emoji、换行符影响）
- 服务端预截断 + 添加
…（适合静态内容，无法响应窗口缩放） - 接受 Firefox 下不显示省略号，只靠
overflow: hidden隐藏溢出（视觉上不够明确）
没有“一行 CSS 全局兼容”的解法；-webkit-line-clamp 是当前平衡开发成本与效果的最佳选择。
line-height 和 font-size 会影响实际截断位置
省略号出现在第 N 行末尾，但这一行是否能完整显示，取决于 line-height 与容器 max-height 的关系。例如：
- 设
-webkit-line-clamp: 2，line-height: 1.5，字体大小14px→ 理论单行高 21px，两行共约 42px - 若容器
max-height: 40px，第二行可能被裁掉一部分，导致省略号位置异常或文字断裂 - 建议用
height或max-height配合line-height整除计算，比如line-height: 1.6+max-height: 48px（3 × 16px）更可控
别依赖“看起来差不多”，多测几种字号和行高组合，尤其在移动端 viewport 缩放后。
