line-clamp-2失效是因为未满足硬性条件：必须同时具备display:-webkit-box、-webkit-box-orient:vertical、overflow-hidden及明确的max-h-或h-类，缺一即静默失效。
line-clamp-2 之类类名加了但没反应，不是 Tailwind 编译问题，而是它根本没满足生效的硬性条件——缺一不可。
为什么加了 line-clamp-2 却还是显示三行？
因为 line-clamp-2 不是“最多两行”，而是“在容器当前高度内最多显示两行”。如果没设 max-h- 或 h-，浏览器认为空间充足，压根不触发截断。
-
max-h-[3.6em]比h-10更稳：像素高度受font-size和line-height影响大，容易错位 - 父容器是
flex或grid时，子元素必须加min-w-0，否则默认min-width: auto阻止收缩，导致高度计算失准 - 别在同一个元素上混用
line-clamp-2和py-3：内边距干扰行高测量，第三行可能“漏出来”
为什么 DevTools 里 -webkit-line-clamp 显示为灰色？
说明浏览器直接忽略了该声明——-webkit-line-clamp 必须和 display: -webkit-box、-webkit-box-orient: vertical、overflow-hidden 同时存在才有效，漏一个就静默失效。
- 插件模式下，
@tailwindcss/line-clamp会自动注入display: -webkit-box和-webkit-box-orient: vertical，但overflow-hidden仍需手动加 - 手写方案中，
display: flex或display: grid会覆盖-webkit-box，必须用嵌套一层div隔离布局 - 某些构建流程（如 Autoprefixer）会删
-webkit-前缀，需加/* autoprefixer: off */注释保护
为什么在 Firefox 里完全没效果？
不是你配置错了，是 Firefox 根本不支持 -webkit-line-clamp。所有 line-clamp-* 类在 Firefox 中都会静默失效——这是浏览器能力缺失，Tailwind 无能为力。
- Safari 16.4+、Chrome 120+ 已开始支持标准
line-clamp（无前缀），但目前仍需靠插件兜底 - 跨浏览器多行截断没有纯 CSS 方案；若必须兼容 Firefox，得用 JS 方案（如
clamp.js）或服务端预截断 - 插件不会帮你绕过这个限制，它只让 WebKit 浏览器里的行为更可靠
最常被忽略的一点：line-clamp 的 overflow-hidden 是作用在**容器自身**上的，而容器若同时承担 padding、border、flex 子项等职责，它的内容区域边界就会模糊——这时候必须把文本包进一层干净的 div，再把 line-clamp-2 overflow-hidden 加在这层上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
