-webkit-line-clamp需与display:-webkit-box、-webkit-box-orient:vertical、overflow:hidden四者共存才生效，缺一不可；常因遗漏display:-webkit-box或父容器为flex/grid导致失效，须配合max-height和固定line-height使用。
为什么 -webkit-line-clamp 常常不生效
它不是独立可用的属性，必须和 display: -webkit-box、-webkit-box-orient: vertical、overflow: hidden 三者同时存在才起作用。漏掉任意一个，浏览器就当它不存在——尤其容易忽略 display: -webkit-box，因为很多人误以为设了 line-clamp 就自动启用弹性布局。
-webkit-line-clamp 的最小必要写法
以下四行缺一不可，且顺序无关紧要，但必须全部写在同一个选择器里：
display: -webkit-box-webkit-box-orient: vertical-
-webkit-line-clamp: 3（数字改为你需要的行数） overflow: hidden
注意：-webkit-line-clamp 只控制“最多显示几行”，不控制每行高度；若文字行高不一致（比如混用了 line-height 或字体大小变化），省略位置可能偏移。建议配合固定 line-height 使用。
兼容性与 fallback 方案怎么选
该方案在 Chrome、Safari、Edge（新版）、绝大多数安卓 WebView 和 iOS Safari 中稳定支持；Firefox 完全不识别 -webkit- 前缀，因此纯 CSS 无 fallback。
- 如果项目明确不支持 Firefox（如内嵌 App 页面），可直接用，无需降级
- 如果需兼容 Firefox，必须加 JS 回退：用
offsetHeight+scrollHeight判断是否溢出，再手动截断字符串 + 拼接"…" - 不要用
text-overflow: ellipsis套多行——它只对单行有效，多行下完全无效
常见踩坑点：Flex/Grid 容器里失效
当父容器是 display: flex 或 display: grid 时，-webkit-box 子元素可能被压缩到 0 高度，导致 line-clamp 不触发。根本原因是弹性容器未给子元素设置明确高度约束。
- 解决方法：给应用
-webkit-line-clamp的元素显式设置max-height（例如max-height: 3.6em，按line-height: 1.2× 3 行计算） - 或者，在父容器上加
align-items: flex-start，避免子项被拉伸或压缩 - 绝对不要指望
height: auto下line-clamp能自适应——它依赖盒模型的高度边界，没有边界就无法判断“第 N 行在哪”
-webkit-box 对 vertical-align、margin 等传统块级行为的忽略，以及它和现代布局混合时的高度塌陷问题。别只盯着 line-clamp 数值，先确保盒子有高度、有方向、有裁剪边界。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
