-webkit-line-clamp 必须搭配 display: -webkit-box、-webkit-box-orient: vertical、overflow: hidden、明确高度约束及块级元素才生效，缺一不可；firefox 原生支持需手动启用且生产环境不可依赖。
line-clamp 必须搭配 -webkit-box 才生效，不是加了就管用
很多人写 -webkit-line-clamp: 2 却没效果，根本原因是它不 standalone 工作。必须同时满足五个条件：块级元素、display: -webkit-box、-webkit-box-orient: vertical、overflow: hidden、有明确高度约束（max-height 或固定 height）。漏掉任意一个，浏览器直接忽略该属性——不是截不断，是压根不进渲染逻辑。
-
display: flex或display: grid的父容器会覆盖display: -webkit-box，导致失效 - 漏写
-webkit-box-orient: vertical：WebKit 下该属性缺失时，-webkit-line-clamp被静默跳过 -
text-overflow: ellipsis必须显式声明，Tailwind 的line-clamp-*类不包含它 - 若容器有
padding或border，max-height应基于box-sizing: border-box计算，否则行数可能偏差
响应式行数控制要用 CSS 变量，别硬写 media query
不同屏幕宽度下，同一行文字的视觉行数可能变化（比如字体缩放、宽度收缩）。硬写 @media (max-width: 768px) { .desc { -webkit-line-clamp: 2; } } 容易在中等断点出现“该截没截”或“不该截却截了”。更可靠的是用 CSS 变量动态驱动：
.responsive-clamp {
--lines: 3;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: var(--lines);
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.5;
max-height: calc(1.5em * var(--lines));
}
- JavaScript 可随时更新：
el.style.setProperty('--lines', '2')，无需操作 class 名 - 配合
matchMedia监听宽度变化，比一堆 media query 更轻量、可维护 - 注意：Firefox 71+ 需手动开启
layout.css.line-clamp.enabled，生产环境不能依赖其原生支持
移动端真机兼容性比你想象的更脆弱
iOS Safari 14+ 和安卓 Chrome 90+ WebView 确实支持 -webkit-line-clamp，但定制系统里埋着坑：
- iOS 13 及更早：完全不识别，
@supports (-webkit-line-clamp: 2)返回false，连检测都不可靠 - 部分华为/小米旧版 WebView（尤其 x86 架构）：CSS 解析器直接跳过该属性，无报错、无 fallback 提示
- 微信内置浏览器（X5 内核）：某些版本对
max-height计算异常，建议用line-height × 行数的精确值，避免用rem或%
别把 line-clamp 放在 Flex/Grid 直接子元素里
这是最常被忽略的布局陷阱。当 .clamp 元素是 display: flex 容器的直接子项时，Flex 布局会接管其盒模型，强制覆盖 display: -webkit-box，导致整个机制崩解。
- 解决办法：加一层 wrapper，让
.clamp不再是 Flex/Grid 的直系子元素 - 或者改用
inline-flex+width: 100%绕过，但需测试 iOS Safari 渲染一致性 - Tailwind 用户注意：
line-clamp-2类默认不带display和overflow，必须手动补全或用@apply组合
实际项目中，真正难的从来不是“怎么写”，而是“怎么确保它在所有用户设备上稳定工作”。-webkit-line-clamp 是个好工具，但它像一把单刃刀——顺向极快，逆向无退路。任何依赖它的交互（比如展开/收起），都得预设 JS fallback 路径，而不是寄希望于 CSS 检测万无一失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
