text-overflow: ellipsis仅支持单行截断，多行必须用-webkit-line-clamp配合display: -webkit-box和-webkit-box-orient: vertical，且firefox等浏览器不原生支持，需js降级或服务端预处理。
多行文本省略号不能只靠 text-overflow: ellipsis，必须用 -webkit-line-clamp 配合 Flex 或 Block 布局才能生效；纯 CSS 多行截断在 Firefox 和旧版 Safari 中有兼容性缺口，别指望它“开箱即用”。
为什么 text-overflow: ellipsis 对多行无效
这个属性天生只作用于**单行块容器**：white-space: nowrap 强制不换行，overflow: hidden 才能触发截断逻辑。一旦允许换行（white-space: normal），text-overflow 就彻底失能——它根本不管第 2 行、第 3 行有没有溢出。
常见错误现象：
- 加了
text-overflow: ellipsis但多行文字照常撑开容器，末尾没省略号 - 误以为只要设
height+overflow: hidden就能截断多行（实际只是把下面几行“裁掉”，不显示省略号） - 在 Firefox 中完全不显示省略号，控制台也无报错（
-webkit-line-clamp是 WebKit 专属）
-webkit-line-clamp 的正确写法与必要条件
它不是独立可用的属性，必须嵌套在特定 display 模式下才起作用。最稳妥的组合是：
display: -webkit-box;<br>-webkit-box-orient: vertical;<br>-webkit-line-clamp: 3;<br>overflow: hidden;
关键点：
-
display: -webkit-box是前提，不能用flex或grid替代（即使加了-webkit-前缀也不行） -
-webkit-box-orient: vertical必须显式声明，否则-webkit-line-clamp被忽略 -
line-clamp值为整数，表示最多显示几行，超出部分统一折叠+省略号 - 容器需有明确高度限制或父容器约束宽度，否则可能不触发截断
Firefox 和跨浏览器 fallback 怎么做
Firefox 完全不支持 -webkit-line-clamp，也没有等效原生 CSS 方案。务实做法是：
- 用 JS 检测是否支持：
const supportsClamp = CSS.supports('-webkit-line-clamp', '3')，不支持时降级为固定字符截断（配合textContent.length或正则） - 服务端预截断：后端按像素宽度估算字数并截取，前端只负责渲染，规避浏览器差异
- 放弃省略号，改用渐变遮罩（
mask-image: linear-gradient(...)）视觉上模拟“淡出”，但本质仍是裁剪，无省略号语义 - 慎用 polyfill：现有 JS 实现（如 clamp.js）依赖重排测量，滚动中易卡顿，且对中文断行不精准
容易被忽略的布局陷阱
即使代码写对，也常因外层结构失效：
- 父元素用了
display: inline或未设width，导致子元素无法计算“多少行算溢出” - 文本内含
<span></span>、<em></em>等内联元素，-webkit-box模式下它们会被强制 inline，可能破坏断行位置 - 设置了
line-height但未同步调整height，造成第 N 行被截断一半，省略号位置偏高或消失 - 使用 Tailwind 的
line-clamp-2类时，若同时加了truncate（单行类），两者冲突，后者会覆盖前者
真正稳定的多行省略号，永远需要在「CSS 原生能力边界」和「JS 降级成本」之间做取舍——没有银弹，只有权衡。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
