-webkit-line-clamp 单独使用无效，必须与 display: -webkit-box、-webkit-box-orient: vertical、overflow: hidden 配合，且容器需有明确 width/max-width；text-overflow: ellipsis 对多行截断无实际作用，省略号由 WebKit 盒模型自动注入。
为什么 -webkit-line-clamp 单独写没用
它根本不是独立属性，而是 WebKit 渲染路径中的一环。只写 -webkit-line-clamp: 2，浏览器直接忽略——因为没触发对应的盒模型布局模式。
必须同时满足四个条件：
-
display: -webkit-box（不能是flex、grid或默认block） -
-webkit-box-orient: vertical（水平排列会完全失效） -
overflow: hidden（父级或自身都得显式声明，继承无效） - 容器有明确的
width或max-width（否则无法计算换行边界）
漏掉任意一个，文本就照常撑开，不截断也不加省略号，且控制台零报错，极难排查。
text-overflow: ellipsis 在多行场景下要不要写
可以写，但不决定省略号是否出现；它对多行截断实际无效。
-webkit-line-clamp 的省略号是 WebKit 盒子渲染时自动注入的，和 text-overflow 无关。不过保留它有两点实际好处：
- 在降级为单行截断（比如媒体查询切到小屏）时能自然生效
- 部分旧版 Safari 对缺失该声明的多行截断偶有渲染延迟
别写 white-space: nowrap——这是单行专属，加了反而让多行逻辑崩溃。
行高、字体变化导致截断“不准”怎么办
-webkit-line-clamp 按行数裁剪，但实际显示行高受 line-height、font-size、甚至 font-family 影响。例如设了 -webkit-line-clamp: 2，但 line-height: 2.4 + 大字号可能只压出 1 行半，视觉上像“没截够”。
- 优先用无单位
line-height（如1.5），避免与像素值混算出错 - 避免给容器设固定
height，它会和-webkit-line-clamp的行数计算冲突 - 若内容含
或图标等内联元素，确认它们没带vertical-align: top或display: inline-block，否则破坏基线对齐
Firefox 和部分 WebView 中 -webkit-line-clamp 不生效怎么处理
Firefox 直到 v119（2023 年底）才支持无前缀 line-clamp，且需开启实验 flag；iOS Safari 16.4 之前只认 -webkit- 前缀；微信安卓 WebView 等常见环境仍存在兼容性问题。
纯 CSS 降级建议：
- 用
@supports (line-clamp: 2)或@supports (-webkit-line-clamp: 2)做特性检测，再套样式 - 对不支持的环境，用
max-height+overflow: hidden控制大致高度（虽不保行数，但至少不撑破布局） - 真要精确行数+省略号，JS 方案更可靠：测
offsetHeight/ 行高 → 截字符 → 拼接「…」或「…更多」
最易被忽略的是：这个属性失败时完全静默，上线前务必在目标真机 WebView 里实测，别只信桌面 Chrome。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
