-webkit-line-clamp 必须与 display: -webkit-box、-webkit-box-orient: vertical、overflow: hidden 三者同时声明才生效；缺一即失效，因其非独立属性，而是 webkit 渲染引擎依赖的组合指令。
line-clamp 能用，但必须配齐三个声明，缺一不可；否则只当没写。
为什么只写 -webkit-line-clamp: 2 不生效
它不是独立 CSS 属性，而是 WebKit 的“组合技”。浏览器看到 -webkit-line-clamp 时，会检查是否同时存在 display: -webkit-box 和 -webkit-box-orient: vertical。任意一个缺失，就直接忽略整个截断逻辑。
-
display: -webkit-box是硬性前提，不能换成flex、block或其他 display 值（哪怕现代 Chrome 支持display: block+line-clamp，也建议保留前缀保兼容） -
-webkit-box-orient: vertical必须显式声明，不写或写成horizontal都会导致截断失败 - 容器必须有明确宽度（
width或max-width），在 Flex 或 Grid 子项中容易被撑开，导致截断不触发
overflow: hidden 和 max-height 怎么选
overflow: hidden 是必需的，用于隐藏溢出内容并配合省略号显示；max-height 则是辅助约束，尤其在 iOS Safari 中能防止因渲染时机问题导致的截断失效。
- 推荐写法：
overflow: hidden+max-height: calc(1.5em * 3 + 0.25em)（3 行示例，+0.25em 是容错余量） - 不要只靠
max-height控制行数——它不加省略号，且用户可能看到被裁切的半行文字 - 避免同时设
height和max-height，前者会强制固定高度，干扰 line-clamp 的弹性计算
Firefox 不支持怎么办
Firefox 完全不识别 -webkit-line-clamp，也没有对应的标准属性。不能指望它“慢慢跟进”，得主动降级。
- 用
@supports not (-webkit-line-clamp: 2)包裹 fallback 规则，例如：max-height: 48px; overflow: hidden; - 服务端或构建时预估字数（如中文 20 字 ≈ 3 行），加
data-fallback-lines="3"，CSS 中据此设max-height - 别用 JS 测
scrollHeight > clientHeight来判断是否溢出——字体未加载完时clientHeight偏小，易误判闪动
含 HTML 标签或换行符的内容慎用
line-clamp 是纯视觉裁剪，不解析 DOM 结构。遇到 <strong>重点</strong> 或 \n，可能截在标签中间或单词中央，导致渲染异常或语义断裂。
- 真实项目中若内容含富文本，优先考虑 JS 方案：逐字符回退 + 安全节点边界检测
- 若坚持用 CSS，确保源文本已做基础清洗（移除无意义换行、合并空格），并加
word-break: break-word防止中英文挤成一行 - iOS Safari 对
line-clamp的支持仍偶有 bug，比如 hover 后重绘失败，建议对交互频繁区域加will-change: contents提前提示渲染引擎
line-clamp 看似简单，但真正稳定落地时，width、display、orient、overflow 四者必须咬合严丝合缝；任何一处松动，都会让省略号消失得毫无征兆。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
