-webkit-line-clamp显示省略号必须与display: -webkit-box和-webkit-box-orient: vertical配合使用，三者缺一不可；text-overflow: ellipsis对多行无效，需显式设置overflow: hidden，且不支持Firefox。
-webkit-line-clamp 必须和 display: -webkit-box 一起用，否则尾部省略号不会出现
很多人写了 -webkit-line-clamp: 2 却没看到省略号，根本原因是漏掉了 display: -webkit-box 和 -webkit-box-orient: vertical。这三者是硬性组合：缺一不可，且浏览器不会报错，只是静默失效。
-
text-overflow: ellipsis对多行无效，删掉它——它只在单行white-space: nowrap场景下起作用 - 省略号由
-webkit-line-clamp自动渲染，不是靠伪元素或背景模拟出来的 - 必须显式写
overflow: hidden，父级的overflow不会传递到截断逻辑中 - 不能把容器设成
display: flex或display: grid，哪怕视觉上一样，也会覆盖-webkit-box导致截断失效
移动端真机测试比 DevTools 模拟器更关键
iOS Safari 14+ 和主流安卓 WebView 大多支持，但 iOS 13 及更早、华为 X86 内核 WebView、部分 Android 6.0 系统浏览器会完全忽略该属性——不是截断不完整，而是压根不生效，文字照常撑开。
立即学习“前端免费学习笔记（深入）”；
- @supports 检测比 UA 判断可靠：
@supports (-webkit-line-clamp: 3)在旧安卓 WebView 中可能返回 true，但实际不工作；推荐用@supports not (line-clamp: 3)或@supports not (-webkit-line-clamp: 3)做降级入口 - iOS 使用 rem 动态缩放时，
-webkit-line-clamp行数计算容易偏移，建议把line-height设为em单位，并加font-size: 1em锁定基准 - Chrome DevTools 的“Responsive Mode”无法复现旧 WebView 的渲染 bug，务必在真机（尤其是低端安卓）上验证
line-clamp-2 类在 Tailwind 中为什么没反应
Tailwind 的 line-clamp-2 不是独立工具类，它依赖插件注入完整声明组合。未启用 @tailwindcss/line-clamp 插件时，该类名根本不会生成 CSS。
- 必须安装并配置插件：
npm install -D @tailwindcss/line-clamp，并在tailwind.config.js的plugins数组中加入require('@tailwindcss/line-clamp') - 即使启用了插件，也必须手动加
overflow-hidden和max-h-[Xem]（如max-h-[3.6em]），不能只靠line-clamp-2 - 若父容器是
flex，子元素需加min-h-0或align-self: flex-start，否则 flex item 可能无视max-height - Firefox 完全不支持该方案，
line-clamp-*类在其中静默失效，这不是 Tailwind 的问题，是浏览器能力缺失
真正难的不是写对那几行 CSS，而是确认当前运行环境是否真的触发了截断逻辑——最稳妥的方式仍是用 JS 创建测试节点对比高度，而不是依赖版本号或 UA 字符串。
