-webkit-line-clamp失效主因是剪裁上下文断裂：必须同时设置display: -webkit-box、-webkit-box-orient: vertical、overflow: hidden于同一元素，并配max-height或固定高度；text-overflow: ellipsis对多行无效，firefox及旧安卓需js降级处理。
为什么写了 -webkit-line-clamp: 2 却没省略号
根本不是属性没生效，而是剪裁上下文断了——浏览器只在特定布局路径下才识别截断意图。
-
display: -webkit-box和-webkit-box-orient: vertical缺一不可；写成flex或grid容器的子元素上会直接失效 -
overflow: hidden必须写在**同一个元素**上；祖先层设了hidden，中间某层是visible或auto，就等于开了后门 - 容器没设
max-height或固定高度，-webkit-line-clamp可能不触发——它依赖布局高度算行数，不是纯逻辑控制 -
text-overflow: ellipsis对多行无效，加了也不起作用，别混用
响应式场景下怎么动态调行数
不能只靠媒体查询改 -webkit-line-clamp 值，得配合高度约束才能稳定触发。
- 用相对单位：比如
line-height: 1.4em，两行就配max-height: 2.8em，三行配4.2em - 小屏切单行时，除了
-webkit-line-clamp: 1，还得补white-space: nowrap+text-overflow: ellipsis（单行专用组合） - 避免在
@media里只改-webkit-line-clamp而漏掉max-height计算，否则 iOS Safari 可能撑开或漏截 - 中英文混排时加
word-break: break-word或overflow-wrap: break-word，减少换行判断误差
Firefox 和旧安卓 WebView 怎么兼容
Firefox 118 及更早版本完全不认 -webkit- 前缀；Chrome 125+ 开始支持无前缀 line-clamp，但旧版安卓微信 X5 内核仍不支持。
- 纯 CSS 没通用解法，视觉降级最轻量：对非 WebKit 浏览器只用
max-height+overflow: hidden，不加省略号 - 必须统一表现时，用 JS 判高度：
element.scrollHeight > element.clientHeight，再逐词回退截取，注意用textContent避开 HTML 标签 - 慎用
::after渐变遮罩——深色背景需透明渐变，否则边缘生硬；且无法响应字号缩放 - 别在
-webkit-line-clamp元素里嵌套<strong></strong>等 inline 标签，它们可能干扰行盒生成
iOS Safari 15.4–16.3 真机异常怎么绕过
这不是你代码错了，是 WebKit 渲染 bug：中英文混排时可能少截一行、省略号消失或偏移。模拟器测不出来，必须真机验证。
- 加
word-break: break-word强制软换行，比依赖浏览器自动换行更可控 - 放弃
-webkit-line-clamp，改用max-height+ 固定line-height组合（例如line-height: 1.5em× 2 行 =max-height: 3em），至少能稳定截断 - 若内容含 emoji、中文、响应式字号，行数控制极易失准——这时候老老实实用 JS 判高度，往往比调一堆 CSS 更省时间
- 真正麻烦的从来不是“怎么写”，而是“怎么让不同设备都看起来差不多”
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
