-webkit-line-clamp 最轻量但需同时设置 display: -webkit-box、-webkit-box-orient: vertical、width/max-width 且禁用 height；参数为数字，受 line-height 和 font-size 影响，ios 16+/android chrome 90+ 稳定支持，firefox 不支持标准版，须保留前缀；混有 url 等长串时需加 word-break: break-word。
移动端多行文字溢出隐藏，用 -webkit-line-clamp 是最轻量、最主流的方案，但必须配齐四个关键属性，缺一不可；否则在 iOS 或安卓 WebView 中大概率失效。
为什么 -webkit-line-clamp 常常不生效
这不是浏览器“支持不好”，而是它对父容器的 CSS 声明有硬性依赖。常见失效原因包括：
-
display没设成-webkit-box（不能用flex或block替代） -
-webkit-box-orient缺失或写错值（必须是vertical，不是horizontal或其他） - 容器没设
width或max-width（哪怕父元素是 flex item，也要显式声明宽度） - 同时写了
height和-webkit-line-clamp（二者冲突，优先级不一致，建议只用后者控制行数）
-webkit-line-clamp 的参数与兼容性要点
这个属性本身只接受一个数字（如 2、3），但它背后的行为受 line-height 和字体大小影响极大：
- 若
line-height: 1.5且font-size: 14px，那-webkit-line-clamp: 2实际占用高度约42px（14 × 1.5 × 2），但容器若被其他样式撑高或压缩，可能显示不全 - iOS Safari 16+ 和 Android Chrome 90+ 均已稳定支持，但部分安卓低端机的 WebView（如 UC 内核）仍需 fallback
- 标准版
line-clamp（无前缀）已在 CSS Overflow Level 4 中定义，但截至 2026 年 5 月，Firefox 仍不支持，所以生产环境必须保留-webkit-前缀
必须加 word-break: break-word 吗
不一定，但强烈建议加。尤其当文本含长英文单词、URL 或纯数字串时：
- 不加
word-break：长单词会直接撑破容器，导致省略号不出现（即使行数超了） -
word-break: break-word更安全，它只在必要时断词；而break-all会在任意字符间断，中文阅读体验差 - 如果内容全是中文/日文/韩文，可省略该属性；但只要混有 URL、邮箱、ID 等，就必须加
容易被忽略的布局陷阱
很多团队上线后才发现“有时省略号出现，有时不出现”，问题往往藏在布局细节里：
- 父容器用了
display: flex，但子元素没设flex: 0 1 auto或min-width: 0→ 子元素会强行不收缩，width失效 - 文本内嵌了
<span></span>或图标，且这些元素设置了vertical-align: middle→ 会干扰-webkit-box的行高计算 - 使用了 CSS-in-JS 库（如 Emotion、styled-components），动态插入样式时，
-webkit-前缀可能被自动剥离，需手动配置 autoprefixer 或显式写出
真正稳定的实现，从来不是堆属性，而是控制变量：固定宽度、禁用意外拉伸、隔离内联元素干扰、为非标准属性留好降级路径。一旦漏掉其中一环，-webkit-line-clamp 就会静默失效——它不会报错，也不会警告，只是默默不工作。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
