-webkit-line-clamp需与display:-webkit-box、-webkit-box-orient:vertical、overflow:hidden四者配合才生效，缺一不可；Firefox和IE完全不支持，须用max-height+overflow:hidden或JS降级。
line-clamp 只在 WebKit 内核浏览器中有效，Firefox 和 IE 完全不支持；想跨浏览器稳定截断，必须准备降级方案。
为什么写了 -webkit-line-clamp: 2 却没效果
常见错误不是属性写错，而是声明组合不完整或上下文被破坏：
-
display: -webkit-box和-webkit-box-orient: vertical缺一不可——漏掉任一个，-webkit-line-clamp就是摆设 -
overflow: hidden必须写在**同一元素**上，不能只靠祖先容器；中间若存在overflow: visible或auto的父层，会切断剪裁上下文 - 同时设了
height或max-height，但值没匹配行高 × 行数（比如行高 20px、想截 2 行，却设了max-height: 36px），导致提前截断或撑开 - 把
display: -webkit-box直接加在 flex item 上——多数情况下会破坏对齐逻辑，建议包一层内层<div> 专用于截断 <h3>哪些浏览器真正支持 <code>-webkit-line-clamp支持范围比想象中窄，且存在已知 bug：
- Chrome 63+、Safari 7.1+、Edge 16+（Chromium 内核）原生支持
- Firefox 完全忽略所有
-webkit-前缀属性，包括display: -webkit-box，所以整套声明无效 - iOS Safari 15.4–16.3 存在渲染异常：中英文混排时可能少截 1 行，或省略号位置偏移、消失
- 真机测试不可省略——模拟器和桌面 Safari 无法复现 iOS 端的换行计算误差
如何安全降级处理非 WebKit 浏览器
纯 CSS 没有通用解法，但可按优先级选择策略：
立即学习“前端免费学习笔记（深入）”；
- 视觉降级：对 Firefox/IE 只用
max-height+overflow: hidden，不加省略号；虽不完美，但至少不溢出 - 伪省略：用
::after渐变遮罩盖住末尾，配合精确max-height；注意深色背景需用透明渐变，否则边缘生硬 - JS 动态截断：用
element.scrollHeight > element.clientHeight判断是否溢出，再逐词回退截取；避免高频重算，优先用ResizeObserver - 放弃省略号，改用固定行高 +
line-height+max-height组合——最稳定，适合电商列表等对一致性要求高的场景
真正麻烦的从来不是“怎么写”，而是“怎么让不同浏览器都看起来差不多”。
-webkit-line-clamp是个快捷键，不是万能钥匙；一旦内容含中文、emoji 或响应式字号，行数控制就容易失准——这时候，老老实实用 JS 判高度，往往比调一堆 CSS 更省时间。
