-webkit-line-clamp 必须与 display: -webkit-box 和 -webkit-box-orient: vertical 联用才生效，缺一不可；需显式设置 overflow: hidden，禁用 flex/grid 布局，注意 iOS rem 缩放偏移、Android 低版本及 Firefox 不支持等问题。
-webkit-line-clamp 必须和 -webkit-box 一起用，否则截断不生效
很多人写了 -webkit-line-clamp: 2 却没看到省略号，根本原因不是行数设错，也不是字体问题，而是漏掉了 display: -webkit-box 和 -webkit-box-orient: vertical。这三者是硬性组合：缺一不可，浏览器不会报错，只是静默失效。
常见错误现象：
- 文字撑开容器，完全无视行数限制
- 加了
text-overflow: ellipsis但多行下毫无反应（它只对单行white-space: nowrap有效） - DevTools 里样式显示正常，真机上却完全不截断
必须显式写 overflow: hidden，父级的 overflow 不会传递到截断逻辑中；不能把容器设成 display: flex 或 display: grid，哪怕视觉上一样，也会覆盖 -webkit-box 导致失效。
移动端真机测试比 DevTools 模拟器更关键
iOS Safari 14+ 和主流安卓 WebView 大多支持，但 iOS 13 及更早、华为 X86 内核 WebView、部分 Android 6.0 系统浏览器会完全忽略该属性——不是截断不完整，而是压根不生效，文字照常撑开。
使用场景：
- 新闻卡片摘要、商品描述、评论预览等需要控制高度的文本容器
- 配合“展开/收起”按钮做交互时，初始状态依赖 CSS 截断
@supports 检测比 UA 判断可靠：@supports not (-webkit-line-clamp: 3) 是更稳妥的降级入口；@supports (-webkit-line-clamp: 3) 在旧安卓 WebView 中可能返回 true 但实际不工作。
iOS 使用 rem 动态缩放时，-webkit-line-clamp 行数计算容易偏移，建议把 line-height 设为 em 单位，并加 font-size: 1em 锁定基准。
Tailwind 中 line-clamp-2 类没反应？检查插件和 overflow
Tailwind 的 line-clamp-2 不是独立工具类，它依赖插件注入完整声明组合：
- 必须安装并配置插件：
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 的问题，是浏览器能力缺失。
居中截断不是靠 text-align，而是靠垂直方向的布局控制
所谓“居中截断”，实际是指文本在容器内垂直居中显示，同时顶部和底部留白均衡。这和 -webkit-line-clamp 本身无关，而是靠容器的 padding、line-height 和 height 配合实现：
- 容器设固定高度（如
h-16），再配py-2控制上下内边距 - 确保
line-height× 行数 ≈ 容器可用高度，避免第一行被顶出或最后一行悬空 - 不要用
display: flex; align-items: center包裹-webkit-box元素，flex 会破坏 box 布局
最易被忽略的一点：line-clamp 的“截断位置”受字体度量影响极大。同一段文字，在不同字体下，-webkit-line-clamp: 2 实际截断位置可能差一行——这不是 bug，是浏览器渲染引擎对行高和基线的计算差异。上线前务必在目标机型上用真实字体验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
