Firefox 68+ 支持无前缀 line-clamp，IE 完全不支持；需用 JavaScript 截断或 flex/height+overflow 模拟实现。
line-clamp在Firefox和IE里不生效怎么办
直接说结论：-webkit-line-clamp 是 WebKit/Blink 内核专属属性，Firefox 从 68+ 开始支持标准 line-clamp（无前缀），但 IE 完全不支持，且 Safari 旧版本（
所以不能只写一行 CSS 就指望它跨浏览器可靠工作。关键不是“怎么写对”，而是“怎么兜底”。
- 优先用
display: -webkit-box+-webkit-line-clamp组合，这是目前最稳定、兼容性最好的基础写法 - Firefox 68+ 可额外加
line-clamp: 3（无前缀），但注意它必须配合display: block或inline-block，不能和-webkit-box共存，否则会被忽略 - IE11 及更早版本：彻底放弃 CSS 截断，改用 JS 计算行高 + 字符截断，或服务端预处理（如后端截取字数+加省略号）
为什么加了-webkit-line-clamp还是不省略
常见现象是文字照常换行、没省略号，甚至布局错乱。根本原因往往不是语法错，而是 display 类型或盒模型约束没配对。
- 必须同时设置：
display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp: N，三者缺一不可 -
overflow必须是hidden，否则省略号不会出现；text-overflow对多行无效，别加 - 父容器需有明确高度或最大高度（
max-height），否则-webkit-box不知道在哪截断 - 如果父元素用了
flex布局且未设align-items: flex-start，子元素的-webkit-box可能被压缩变形，导致截断失败
JS降级方案该截多少字符才像CSS那样自然
CSS 的 line-clamp 是按行高和容器高度算的，JS 无法精确模拟换行位置，硬按字符数截容易在单词中间断开或留白过多。得换思路。
立即学习“前端免费学习笔记（深入）”；
- 不要用
substring算固定长度，先用getClientRects()获取每行 DOMRect，判断第 N+1 行是否溢出 - 更实用的做法：先让元素自然渲染（不设
max-height），测出单行高度lineHeight = el.clientHeight / el.getClientRects().length，再反推 N 行对应的最大高度，最后设max-height并启用 CSS 截断 —— 这样 JS 只做探测，渲染仍交给 CSS - 若必须纯 JS 截断，用
textContent+ 正则匹配空格/标点，在合理断点处截，末尾手动加…；避免在中文里按字数截，因为字体、字号、宽度都会影响实际占位
line-clamp和font-size响应式一起用的坑
当 font-size 用 rem 或 vw 动态变化时，-webkit-line-clamp 表现会不稳定：小字号下可能多显示一行，大字号下提前截断，甚至省略号消失。
-
line-clamp本身不响应字号变化，它依赖的是当前计算后的行高和容器尺寸，所以每次字号变，都要触发重排重绘 - 如果用
vw，务必同步调整max-height，比如max-height: calc(1.5em * 3)比写死45px更可靠 - Safari iOS 15.4–16.3 存在 bug：动态修改
font-size后，-webkit-line-clamp不自动更新，需强制触发重排（例如el.offsetHeight读一次）
真正麻烦的不是写法，是不同浏览器对“行高”“内联盒”“截断时机”的实现差异。哪怕同一段代码，在 Chrome Canary 和 Safari TP 里表现都可能不一致。上线前至少要在 iOS Safari、Chrome Android、Firefox Desktop 上实机测三遍。
