text-overflow: ellipsis仅对单行有效，多行必须用-webkit-line-clamp配合display: -webkit-box、-webkit-box-orient: vertical、overflow: hidden及宽度约束；Firefox等需JS或降级方案。
text-overflow: ellipsis 在多行场景下不生效，必须换思路。原生 CSS 没有跨浏览器通用的多行省略方案，-webkit-line-clamp 是当前最接近“开箱即用”的方式，但它只在 WebKit/Blink 内核浏览器中可靠。
为什么 -webkit-line-clamp 不能直接套用
它不是标准属性，Firefox、IE、旧版 Edge 全都不支持；即使在 Chrome/Safari 中，也依赖严格的属性组合顺序和容器约束：
-
display: -webkit-box必须写在最前面，否则-webkit-line-clamp被忽略 -
-webkit-box-orient: vertical缺失会导致文本横向堆叠，而不是纵向截断 - 容器必须有明确的
width或max-width，仅靠height不足以触发截断逻辑 - 父元素不能有
flex或grid布局干扰（某些版本 Safari 会失效）
-webkit-line-clamp 的最小可用配置
以下代码在 Chrome 120+、Safari 17+、Edge 115+ 中稳定工作：
.multi-ellipsis {
width: 300px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
注意：text-overflow: ellipsis 可加可不加——它对多行无效，但保留不影响效果，且部分旧版 Safari 需要它才渲染省略号。
Firefox 和其他非 WebKit 浏览器怎么办
没有纯 CSS fallback。常见做法是降级或补救：
立即学习“前端免费学习笔记（深入）”；
- Firefox 用户看到完整文本（不截断），但布局不崩——这是最轻量的降级
- 用
clamp.js库做 JS 补充：它通过测量行高 + 容器高度反推可容纳行数，再手动截断字符串并加… - 避免强依赖多行省略：改用「展开/收起」交互，或用 tooltip hover 显示全文
- 服务端预截断（如 API 返回时就限制字数），适合内容可控、SEO 敏感的场景
容易被忽略的细节
字体变化会让行高浮动，-webkit-line-clamp: 3 实际显示可能只有 2.8 行，末尾省略号位置偏上；若容器用了 line-height: 1.5，但子元素设置了 font-size: 14px，真实行高 ≠ 14×1.5，JS 方案也需按实际渲染行高计算——这点在响应式字体（rem 或 clamp()）下尤其容易出错。
