-webkit-line-clamp需与display: -webkit-box、-webkit-box-orient: vertical、overflow: hidden联用才生效；漏任一属性或上下文不匹配（如非block元素、无高度约束、flex直接套用）均导致截断失效。
-webkit-line-clamp 不是独立可用的 CSS 属性，它必须和 display: -webkit-box、-webkit-box-orient: vertical、overflow: hidden 三者写在同一元素上才生效；漏掉任意一个，浏览器就完全忽略它——列表项里写了 -webkit-line-clamp: 2 却照常撑开，不是代码没保存，是剪裁路径根本没启动。
为什么列表项加了 line-clamp 还是不截断
常见错误不是属性写错，而是布局上下文被意外打断：
-
display没设成-webkit-box（哪怕父容器是flex或grid，子项也不能直接靠line-clamp自动切换渲染模式） -
overflow: hidden写在祖先层（比如.list），但中间某层（比如.item）是overflow: visible或auto，等于开了后门 - 容器没设
max-height或固定高度（-webkit-line-clamp依赖高度推算行数，纯靠内容撑开时无法触发截断逻辑） - 列表项用了
inline或inline-block，而-webkit-line-clamp只对block级元素有效
在 flex/grid 列表中安全使用 line-clamp
别试图在 display: flex 的 .item 上硬套 -webkit-box——它会破坏对齐、撑宽或导致高度塌陷。正确做法是加一层内联包装：
- 结构上把文本包进
<div class="clamp-text"></div>，只对这个内层设display: -webkit-box - 确保该内层有明确宽度约束（比如
width: 100%或max-width: 300px），否则在 flex 中可能无法换行 - 外层
.item保持display: flex，但需加align-items: flex-start防止子项被拉伸压缩 - 避免在
.clamp-text内嵌<img>、<strong></strong>或带vertical-align的元素，它们会扰动行盒生成，导致截断位置偏移
Firefox 和真机 iOS Safari 的兼容性怎么兜底
Firefox 118 及更早版本完全不识别 -webkit- 前缀；iOS Safari 15.4–16.3 在中英文混排或 emoji 场景下存在省略异常（少截一行、省略号消失），模拟器测不出来，必须真机验证：
- 视觉降级最轻量：
max-height: calc(2 * 1.4em)+line-height: 1.4em+overflow: hidden，能稳定截断但不保证精确行数 - JS 精准方案：用
element.scrollHeight > element.clientHeight判断是否溢出，再逐词回退截取（注意用textContent，避开 HTML 标签干扰） - 别用
text-overflow: ellipsis混合多行——它对单行有效，多行下不起作用，加了反而误导调试 - 别指望自动适配响应式字号，一旦
font-size动态变化，max-height就失效；真要兼顾，得用 JS 动态重算
真正麻烦的从来不是“怎么写”，而是“怎么让不同设备都看起来差不多”。-webkit-line-clamp 是快捷键，不是万能钥匙；一旦内容含中文、emoji 或动态字号，行数控制就容易失准——这时候，老老实实用 JS 判。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
