-webkit-line-clamp 并非失效，而是必须满足四件套：display: -webkit-box、-webkit-box-orient: vertical、overflow: hidden 和明确宽度，缺一不可；iOS Safari 16.4+ 对动态字号、transform 等干扰更敏感，会静默降级；Firefox/Edge Legacy 不支持该前缀属性。
它不是“失效”，而是根本没满足触发条件——-webkit-line-clamp 从不自动生效，必须四件套齐备、布局干净、浏览器支持，缺一不可。
为什么 -webkit-line-clamp 看起来像“写了但没用”
这不是 bug，是 WebKit 渲染引擎的硬性规则：它只在特定 display 模式下参与行数计算。漏掉任意一个必要声明，整个逻辑就跳过，不报错、不警告、也不 fallback。
-
display: -webkit-box必须写在最前面，不能用display: flex或display: grid替代（哪怕加了-webkit-前缀也不行） -
-webkit-box-orient: vertical必须显式声明，不是默认值，Webpack 或 PostCSS 有时会误删它（建议加/* autoprefixer: ignore next */注释保护） -
overflow: hidden缺失时，省略号不会渲染；设成scroll或auto也无效 - 容器没有明确宽度约束（比如父级是
display: inline、或没设width/max-width），-webkit-line-clamp直接放弃计算
为什么 iOS Safari 在更新后突然不显示省略号
iOS 16.4+ 开始，Safari 对 -webkit-line-clamp 的行数判定更严格：只要检测到任何可能干扰文本流稳定性的因素，就静默降级为全文显示。
-
font-size: clamp(1rem, 2vw, 1.2rem)这类动态字号会让行高浮动，WebKit 拒绝计算行数 - 父级用了
transform: translateZ(0)、will-change: transform或backface-visibility: hidden，强制硬件加速后布局树不稳定 - 元素本身是
<td> 或 <code><th> —— <code>text-overflow和-webkit-line-clamp在display: table-cell下完全不触发 - 用 JS 动态改过
style.fontSize或插入带样式的子节点后未触发重排，getComputedStyle(el).lineClamp返回空字符串，说明已被内核忽略 - 别信“加个
@supports (line-clamp: 3)就能兜底”的说法——这个语法目前只有极少数 Nightly 版本识别，正式版仍返回false - JS 测量方案（
scrollHeight > clientHeight）在中英文混排、字体加载延迟、缩放比例变化时误差常达 ±2 行 - 表格单元格、Flex 子项里调用
getBoundingClientRect()，结果可能受父级overflow影响返回0，导致误判 - 滚动中频繁执行测量 + 截字符串，帧率容易跌破 20fps，尤其在低端 Android 设备上
-
text-overflow: ellipsis必须配合white-space: nowrap才起作用；一旦允许换行（white-space: normal），它就彻底失能 - 设
height: 48px（假设line-height: 16px）看似够 3 行，但首行 baseline、字距、CJK 字符下沉等都会吃掉额外像素，最后一行常被截断一半，没空间画省略号 - Flex 子项若没加
min-width: 0或flex: 1，文字会强行撑宽容器，导致scrollWidth === offsetWidth，浏览器判定“没溢出”，-webkit-line-clamp不启动 -
<span></span>等 inline 元素直接套-webkit-line-clamp无效，必须先设display: inline-block或block
为什么 Firefox / Edge Legacy 完全没反应
它们压根不解析 -webkit- 前缀属性，不是“兼容性差”，是根本不认识。所谓“Firefox 支持 line-clamp”仅限于 68+ 版本实验性开启的 line-clamp 标准属性（无前缀），且默认关闭、需手动启用 flag，生产环境不可依赖。
立即学习“前端免费学习笔记（深入）”；
为什么设了 height + overflow: hidden 却只裁掉文字、没省略号
这是最典型的误解：text-overflow: ellipsis 与多行无关，它只响应单行水平溢出。你看到的“被裁掉”，只是内容被物理遮盖，不是 CSS 截断逻辑生效。
真正难的不是写对那四行 CSS，而是让整个布局链路稳定、可预测：从字体加载时机、父级 display 类型、transform 干扰，到移动端 Safari 的新限制，任何一个环节松动，省略号就消失——它不像颜色或边框那样“写了就见”，而是一个脆弱的排版契约。
