text-overflow: ellipsis仅适用于单行文本，因它依赖white-space: nowrap+overflow: hidden；多行需用-webkit-line-clamp（含display: -webkit-box等四要素），但firefox不支持，须降级处理或js动态截断。
text-overflow: ellipsis 对多行文本完全无效，必须换思路。现代浏览器可用 -webkit-line-clamp，但 Firefox 仍不支持 —— 别硬套单行方案，否则只会看到文字直接撑开容器或被粗暴裁剪。
为什么 text-overflow 不适用于多行
这个属性只在 white-space: nowrap + overflow: hidden 的单行上下文中生效。一旦允许换行（比如 white-space: normal），text-overflow 就彻底失能，无论你加多少 max-height 或 line-height 都没用。
常见错误现象：
- 文字明明超出了三行，却没省略号，反而从容器底部漏出来
- 加了
text-overflow: ellipsis但毫无反应，控制台也无报错 - 在 Safari 正常，在 Firefox 里整段文字全显示，甚至溢出父容器
-webkit-line-clamp 的正确写法和限制
这是目前最轻量、无需 JS 的多行截断方案，但它是一组强耦合属性，缺一不可：
-
display: -webkit-box：必须用这个 display 值，flex或block都不行 -
-webkit-box-orient: vertical：方向必须是vertical，拼错或写成horizontal会失效 -
-webkit-line-clamp: 3：值必须是整数，不能是3.5或calc(2 + 1) -
overflow: hidden：必须显式声明，不能靠继承或父级传递
示例：
.multi-ellipsis {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
/* 还需 width / max-width，否则 -webkit-line-clamp 不触发 */
}
注意：width 或 max-width 仍是必需的 —— 它不是靠高度算行数，而是靠盒模型宽度 + 行高自动折行后，再按行数截断。
Firefox 和旧 Edge 的降级处理策略
Firefox 直到今天（2026年8月）仍未实现 -webkit-line-clamp，且无计划支持。你有三个实际选择：
- 接受降级：对 Firefox 用户显示完整文本，或用
max-height+overflow: hidden硬裁，但无省略号 - 用伪元素渐变遮罩（
::after+linear-gradient）模拟视觉省略效果，但本质是“盖住”而非截断，文本仍可被复制、聚焦、读屏器读出 - JS 精准截断：监听容器
offsetHeight，按line-height × 行数计算最大可容纳字符数，再用textContent.substring()截取。注意避开 HTML 标签、中文断字、英文单词中间截断
关键坑点：用 JS 截时，若内容含 <span>加粗</span>文本，直接 substring 会破坏标签结构，必须先转成纯文本再操作，或用 DOM 操作逐节点计算高度。
最易被忽略的一点：所有方案都依赖稳定的 line-height。如果字体加载延迟、或用了 font-size: clamp() 导致行高动态变化，-webkit-line-clamp 可能截出 2.8 行或漏半行字 —— 这类问题在线上环境很难复现，建议在真实设备+不同网络条件下验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
