-webkit-line-clamp仅在display:-webkit-box且-webkit-box-orient:vertical时生效，缺一不可；Firefox不支持，需JS回退；现代CSS line-clamp仍需前缀或实验性启用。
为什么 -webkit-line-clamp 有时完全不生效
核心原因就一个：它只在 display: -webkit-box（或 -webkit-flex）布局下才起作用，且必须配合 -webkit-box-orient: vertical。纯 block 或 inline 元素上加这个属性，浏览器直接忽略。
常见错误写法：
.text {
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
}
这不会生效——缺了关键的 display 和 box-orient 声明。
- 必须显式设置
display: -webkit-box - 必须加
-webkit-box-orient: vertical -
overflow: hidden和text-overflow: ellipsis是配套必需项，缺一不可 - 若父容器有
height限制但未设overflow: hidden，也可能导致截断失败
-webkit-line-clamp 在不同浏览器中的兼容性现实
它本质是 WebKit/Blink 内核的私有属性，Chrome、Edge（新版）、Safari 支持良好；Firefox 完全不支持（截至 Firefox 128），且没有等效原生 CSS 替代方案。
立即学习“前端免费学习笔记（深入）”；
这意味着：
- 不能单独依赖它做跨浏览器一致的行数控制
- 若需兼容 Firefox，必须搭配 JS 回退方案（如用
offsetHeight+textContent截断） - Safari 16.4+ 对
-webkit-line-clamp的行为做了微调：当内容含换行符\n或 - 移动端 iOS Safari 表现通常稳定，但低版本（iOS 12–13）对嵌套 flex 容器内使用该属性偶有渲染异常
如何安全地用 -webkit-line-clamp 实现两行溢出省略
最简可靠写法如下，已通过 Chrome 120+、Edge 122、Safari 17.4 验证：
这本书给出了一份关于python这门优美语言的精要的参考。作者通过一个完整而清晰的入门指引将你带入python的乐园，随后在语法、类型和对象、运算符与表达式、控制流函数与函数编程、类及面向对象编程、模块和包、输入输出、执行环境等多方面给出了详尽的讲解。如果你想加入 python的世界，David M beazley的这本书可不要错过哦。 (封面是最新英文版的,中文版貌似只译到第二版)
.clamp-2 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
}
注意点：
- 不要给元素设固定
height，否则可能和-webkit-line-clamp冲突（尤其字体大小动态变化时） - 若文本内含
等内联子元素，确保它们没触发white-space: nowrap或display: inline-block，否则会破坏盒模型流 - 使用
line-height时建议用无单位数值（如1.5），避免与-webkit-line-clamp计算逻辑冲突 - 若需响应式行数（如小屏 1 行、大屏 3 行），用媒体查询重置
-webkit-line-clamp值即可，无需 JS
替代方案：纯 CSS 无前缀的现代尝试
CSS line-clamp 已进入 Level 4 规范，但目前仅 Chrome 125+ 和 Safari 17.4+ 开始实验性支持，且需启用 flag 或前缀。现阶段无法脱离 -webkit- 前缀独立使用。
所以当前真实可用的“无前缀”路径只有两条：
- 接受 Firefox 不截断（显示全部），其他浏览器走
-webkit-line-clamp - 用 JS 检测
CSS.supports('line-clamp', '2')，返回 false 时注入回退逻辑
别信“用 display: grid + max-lines”之类的误导方案——max-lines 还在草案中，没有任何浏览器实现。
真正稳定的多行截断，至今仍绕不开那个带前缀的老朋友，只是得把它用对。
