line-clamp 在 iOS Safari 中不生效是因为它依赖 -webkit-line-clamp，而该属性仅在 display: -webkit-box 元素上有效，且需同时设置 -webkit-box-orient: vertical 和明确的 max-height。
line-clamp 在 iOS Safari 里不生效？检查 display 和 -webkit-box
直接说结论：line-clamp 不是纯 CSS 标准属性，它依赖 -webkit-line-clamp，而这个属性只在 display: -webkit-box 的元素上起作用。iOS Safari（尤其是 15.4 之前）对 display: -webkit-box 的兼容性极敏感，漏掉任意一环都会静默失效。
常见错误现象：文字明明超出容器高度，却完全不截断，也不显示省略号；或者只在 Chrome 模拟器里正常，真机一跑就失效。
- 必须同时设置：
display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp: N - 不能用
display: flex或display: grid替代-webkit-box—— 即使其他样式看起来一样，-webkit-line-clamp会直接忽略 - 父容器需有明确高度或最大高度（
max-height），否则截断逻辑无锚点 - 省略号（
text-overflow: ellipsis）必须配合overflow: hidden和word-break: break-word（或overflow-wrap: break-word）才能在中英文混排时可靠换行
截三行但最后一行被切掉半截？控制行高与 padding 的叠加影响
line-clamp 截的是“行数”，不是“像素高度”。如果 line-height 和上下 padding 加起来导致第 N 行内容实际溢出容器边界，视觉上就会出现“切半行”的错觉——其实不是 bug，是计算结果符合预期，只是没对齐设计师的像素要求。
使用场景：卡片标题、商品摘要、评论预览等需要严格控高的列表项。
立即学习“前端免费学习笔记（深入）”；
- 用
line-height: 1.4比line-height: 24px更安全，避免字号缩放时行高失配 - 若容器有
padding，建议把max-height设为(line-height × N) + padding-top + padding-bottom，而不是凭感觉写死 - 慎用
margin替代padding：外边距不参与容器高度计算，容易让实际内容撑高
Android WebView 或老版微信内置浏览器白屏/崩溃？避开 flex + line-clamp 嵌套
部分 Android WebView（如 UC 内核、X5 内核早期版本）在 display: flex 容器内嵌套 display: -webkit-box 元素时，会触发渲染异常，轻则截断失效，重则整个区块白屏甚至页面卡死。
性能影响：这类组合会让 WebKit 渲染引擎反复回流，尤其在长列表中滚动时帧率明显下降。
- 确保
-webkit-box元素是块级直系子元素，不要套在div+flex+div这类多层 wrapper 里 - 避免在
line-clamp元素上同时设置transform或will-change—— 某些 X5 版本会直接拒绝渲染 - 测试时务必用真机微信（非开发者工具），工具里常模拟过度，掩盖真实兼容问题
需要动态控制行数？别用 JS 改 class，直接操作 style 属性
想根据屏幕宽度或用户操作切换显示 2 行 / 3 行？别写一堆 .clamp-2 / .clamp-3 类再用 JS 切换，这样容易触发重排且维护成本高。直接改 style 是最稳妥的。
参数差异：-webkit-line-clamp 是单值数字，不支持百分比或 calc()，JS 设置时注意类型（字符串或数字都行，但不能是 null）。
- 用
el.style.webkitLineClamp = '3'（注意驼峰写法，不是短横线） - 改完后记得同步更新
max-height，否则新行数可能因高度不足被提前截断 - 服务端渲染（SSR）场景下，首次渲染必须带初始
-webkit-line-clamp值，否则 hydration 后 JS 注入会闪动
真正难的不是写对这三行 CSS，而是得记住：它本质是 WebKit 的私有 hack，不是标准布局机制。一旦涉及动画、响应式、SSR 或混合渲染，所有看似无关的样式都可能成为触发点。多测真机，少信模拟器。
