line-clamp需配合display:-webkit-box、overflow:hidden、-webkit-box-orient:vertical及-webkit-line-clamp才生效，text-overflow对多行无效，Firefox和旧Safari兼容性差。
line-clamp 不生效？检查 display 和 overflow 是否配齐
line-clamp 是个“半独立”属性，必须和 display: -webkit-box、overflow: hidden、-webkit-line-clamp 三者配合才起作用，缺一不可。常见错误是只写了 -webkit-line-clamp: 2，但父容器用的是默认 display: block，结果完全没截断。
-
display必须设为-webkit-box（仅需这一值，不用加flex或grid） -
overflow必须显式设为hidden（哪怕父级已有隐藏，子级也要单独写） -
-webkit-box-orient必须设为vertical，否则文字不按行堆叠 - 标准语法
line-clamp目前仍需前缀，建议同时写-webkit-line-clamp和line-clamp
多行截断后末尾加省略号，text-overflow 只对单行有效
很多人以为 text-overflow: ellipsis 能直接用于多行，其实它只在 white-space: nowrap + 单行场景下生效。多行省略号靠的是 -webkit-box 的渲染机制，不是 text-overflow 控制的。
- 不需要也不应该写
text-overflow: ellipsis（写了也无效） - 省略号自动出现在最后一行尾部，前提是文字足够长、且
-webkit-line-clamp值合理 - 若想自定义省略号样式（比如用「…更多」），不能靠 CSS，得用 JS 截字符串 + 拼接，或服务端预处理
- 字体大小、行高会影响实际显示行数，
line-height: 1.5下设-webkit-line-clamp: 2可能只压出 1 行半，视觉上像“没截够”
Firefox 和旧版 Safari 兼容性差，别指望纯 CSS 方案全覆盖
line-clamp 在 Firefox 中直到 v119 才支持无前缀版本（2023 年底），而 iOS Safari 16.4 之前只认 -webkit-line-clamp，且某些安卓 WebView（如微信内置）会忽略该属性。
- 如果项目需兼容 Firefox
- 简单降级：用
max-height+overflow: hidden粗略控制高度（但无法保证精确行数） - 精准降级：用 JS 计算行高 × 行数，动态截取字符数，再加省略按钮（注意避免重复初始化）
- 别把
line-clamp当成“现代浏览器就稳了”，上线前务必在真机 WebView 里实测
line-clamp 看似简单，但 display 模式、WebKit 渲染路径、跨浏览器行为差异这些点，任何一个漏掉都会让截断失效。最麻烦的是——它失败时通常不报错，只是静静显示全部文字，很容易被忽略。
立即学习“前端免费学习笔记（深入）”；
