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 缩放后。