line-clamp仅WebKit内核支持，Firefox完全不识别；需display:-webkit-box、-webkit-box-orient:vertical和-webkit-line-clamp三者配合；失效主因是未设高度约束、flex布局干扰或内联元素破坏行盒计算；多行省略须伪元素模拟，iOS Safari存在渲染抖动。
line-clamp只在WebKit内核生效，别指望Firefox原生支持
用 -webkit-line-clamp 截断多行文本，本质是 WebKit 的私有扩展，Chrome、Safari、Edge（Chromium版）能用，Firefox 完全不识别——它连 display: -webkit-box 都不解析，直接退化为完整显示。不是兼容性差，是压根没实现。
实操建议：
- 必须搭配
display: -webkit-box和-webkit-box-orient: vertical才生效，三者缺一不可 - Firefox 用户只能靠 JS 模拟（比如用
textContent+getClientRects()数行高），或改用服务端截断 + 省略号 - 如果项目需强跨浏览器支持，优先考虑后端控制字符数，前端只做兜底
line-clamp失效的三个高频原因
写对了 CSS 却没截断？大概率掉进了这几个坑里：
-
height或max-height没设，或者设得过大——-webkit-line-clamp依赖容器高度“挤出”溢出，没约束就不起作用 - 父元素用了
flex布局但没设flex-shrink: 0或min-width: 0，导致子元素宽度撑开，换行逻辑错乱 - 文本内嵌了
<img alt="CSS如何限制多行文本显示行数_结合-webkit-line-clamp使用" >、<span></span>等替换元素，或设置了vertical-align，破坏了-webkit-box的行盒计算
简单验证：临时加 outline: 1px solid red 看容器是否真被限制住了高度。
立即学习“前端免费学习笔记（深入）”；
line-clamp和overflow:hidden组合时，省略号可能不显示
text-overflow: ellipsis 在多行场景下不会自动生效——它只对单行 white-space: nowrap 有效。多行省略号必须靠伪元素手动拼接。
实操写法：
div {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
position: relative;
}
div::after {
content: "...";
position: absolute;
bottom: 0;
right: 0;
background: white; /* 覆盖最后一行末尾 */
padding-left: 4px;
}注意：::after 的 background 颜色必须和父容器背景一致，否则会漏出底层文字；若背景非纯色（如渐变/图片），此方案不可靠。
移动端iOS Safari的line-clamp渲染抖动问题
iOS 15+ 上，滚动中偶发最后一行突然多显示半行，松手后才修正。根本原因是 Safari 对 -webkit-box 的重排优化过于激进，遇到字体加载、动态内容插入就容易失准。
缓解手段：
- 确保文本字体已预加载（
font-display: optional或提前@font-face声明） - 避免在
line-clamp容器内使用will-change: transform，会干扰渲染管线 - 极端情况可加
transform: translateZ(0)强制硬件加速，但会增加内存占用
真正稳定的方案仍是服务端截断 + 固定行高布局，CSS 多行省略本质是视觉妥协，不是结构保证。
