line-clamp不生效的主因是缺失关键声明：必须同时设置display: -webkit-box、-webkit-box-orient: vertical和-webkit-line-clamp:n，且父容器需overflow:hidden；它仅限webkit内核，不兼容flex/grid布局，也不响应动态内容更新。
line-clamp 不生效的常见原因
直接写 display: -webkit-box 和 -webkit-line-clamp: 2 却没效果？大概率是漏了关键约束：它只对块级元素起作用，且必须配合 -webkit-box-orient: vertical，否则浏览器根本不会按“行”去截断。
-
display必须是-webkit-box（不能用flex或block） -
-webkit-box-orient必须显式设为vertical - 父容器不能有
overflow: visible（默认值），至少得是hidden或auto - 如果文本里有
<br>
或内联块元素，line-clamp可能提前截断或失效
标准写法与必要前缀组合
只写 -webkit-line-clamp 在 Safari 和 Chrome 没问题，但 Firefox 完全不支持——目前仍无原生 CSS 方案替代。所以生产环境必须接受它是 WebKit 专属特性，别指望跨浏览器一致。
- 最小可用组合必须包含三句：
display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp: N -
overflow: hidden要加在同一个元素上，否则溢出文本会撑开容器 - 建议补一句
display: -webkit-box后再加display: block（现代浏览器忽略后者，老 Safari 需要前者）
.clamp-2 {
display: -webkit-box;
display: block;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
和 flex / grid 布局混用时的冲突
如果文本容器本身是 flex 子项或 grid 区域，-webkit-box 会破坏原有布局流——它本质上是另一套盒模型，跟 flex 不兼容。
- 不要把
-webkit-box直接写在flex容器上；应在内部加一层<span></span>或<div> 专门做截断 <li>如果父级用了 <code>min-height或flex: 1，子级-webkit-box可能无法正确计算行高，导致截断错位 - 行高影响极大：
line-height过大会让line-clamp实际显示少于预期行数，建议统一用无单位数值（如1.4） - 内容必须是纯文本或可内联渲染的内容（避免里面嵌
div、img等块级元素） - 不能设置
text-overflow: clip（它会禁用省略号，只留ellipsis才有效） - 宽度必须受限：容器要有明确
width、max-width或被父级约束住，否则没有“溢出”就无从截断
截断后省略号不显示或位置异常
省略号（…）不是自动加的，而是由 -webkit-box 渲染机制隐式触发的。一旦不出现，基本是以下三个条件中某一个没满足：
另外，中文下偶尔出现省略号悬空在行尾右侧外，是因为字体度量差异，可微调 padding-right: 0.2em 缓解。
line-clamp 不会自动重算高度，也不触发重绘——得靠强制重排（例如改 key 或临时 toggle visibility）来刷新。
