line-clamp必须配合display:-webkit-box和-webkit-box-orient:vertical才能生效；漏掉任一条件则截断失效，常见原因包括容器使用flex/grid、未设box-orient、height/max-height冲突或宽度不足。
line-clamp 不是独立可用的 CSS 属性，必须配合 display: -webkit-box 和 -webkit-box-orient: vertical 才能生效。直接写 line-clamp: 3 或 -webkit-line-clamp: 3 却漏掉其他必要条件，文本不会截断，也不会报错——这是最常被忽略的起点。
为什么 -webkit-line-clamp 不生效？
根本原因在于它依赖一套旧版弹性盒模型（-webkit-box），不是现代 flex 或 grid 的替代品。常见失效场景包括：
- 容器用了
display: flex或display: grid—— 必须改成display: -webkit-box - 漏写了
-webkit-box-orient: vertical—— 没有它，-webkit-line-clamp就像没装电池的遥控器 - 父级设置了
height或max-height且值过小 —— 会先按高度裁剪，再尝试按行数裁剪，导致文字被切在半行中间 - 容器宽度不够（比如被
flex-shrink: 0锁死）—— 文本没空间换行，line-clamp就退化成单行截断
@supports 检测比 UA 判断更可靠
别用 JavaScript 判断浏览器类型来开关样式，@supports (-webkit-line-clamp: 1) 是唯一稳妥的启用条件。Firefox 68+ 支持标准 line-clamp（需前缀 -webkit-），但直接写 line-clamp: 3 仍不生效；而 @supports (line-clamp: 2) or (-webkit-line-clamp: 2) 可覆盖更多情况。关键点：
-
max-height: none必须加在@supports块内，否则max-height会和-webkit-line-clamp双重限制，造成截断错位 - 降级方案用
max-height: calc(1.5em * 3)+overflow: hidden，虽不能显示省略号，但至少控高 - 不要在
@supports外写display: -webkit-box—— 非 WebKit 浏览器会因此破坏布局
展开/收起切换时 display 值容易冲突
点击“展开”后，如果只改 -webkit-line-clamp 为 unset，但没重置 display，容器仍保持 -webkit-box 模式，可能导致文字撑开异常或换行错乱。正确做法是：
- 收起状态：用完整
-webkit-box+-webkit-line-clamp组合 - 展开状态：移除所有
-webkit-相关声明，并显式设display: block（或还原原始 display） - 避免用
!important强覆盖，优先靠类名层级或display: revert回退
真正麻烦的不是写几行 CSS，而是当它和 Flex/Grid、CSS-in-JS、SSR 渲染顺序混在一起时，display 的继承与重置很容易出岔子。多试一次 getComputedStyle 查看实际生效值，比猜更管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
