line-clamp在tailwind中需手动补全五大前提：display: -webkit-box、-webkit-box-orient: vertical、overflow-hidden、明确高度约束（如h-12）、flex/grid子项加min-w-0；缺一则失效，且必须显式添加text-ellipsis。
line-clamp 在 Tailwind 中不是“加了就生效”的工具类，它只生成 -webkit-line-clamp 值，其余五个硬性前提全得手动补全或靠插件注入。直接写 line-clamp-2 没反应，大概率卡在布局或溢出控制上。
为什么 line-clamp-2 加了但文本照常换行
浏览器根本不认为“有内容溢出”，因为缺失触发截断的物理前提：
-
display: -webkit-box缺失——flex或block都不行，必须显式声明 -
-webkit-box-orient: vertical缺失——Tailwind 默认不生成这个声明，得自己加或靠插件 - 没加
overflow-hidden——line-clamp类不含它，但省略号必须依赖隐藏溢出才能显示 - 容器没高度约束——比如
max-h-[3.6em]或h-12必须存在，否则浏览器按内容撑高，-webkit-line-clamp形同虚设 - 父级是
flex或grid容器，且子项没加min-w-0——flex 项目默认不收缩，导致内部行高计算失准
用 @apply 快速修复单点问题
不装插件、不改配置，最稳的方式是在组件内用 @apply 补齐缺失样式链。重点是顺序和组合不能错：
- 必须先设
@apply block overflow-hidden text-ellipsis，再叠加display: -webkit-box等声明 -
-webkit-line-clamp的值要和类名数字一致，比如line-clamp-3对应-webkit-line-clamp: 3 - 必须显式加
text-ellipsis——Tailwind 的line-clamp不含它，漏掉就没省略号 - 避免把
line-clamp直接加在带py-3、px-4的元素上——padding 会干扰行高测量，第三行可能“漏出来”
.clamp-2 {
@apply block overflow-hidden text-ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
Flex/Grid 容器里 line-clamp 失效怎么办
不是类失效，是布局逻辑覆盖了文本逻辑。Flex/Grid 子项默认 min-width: auto，拒绝压缩，导致 line-clamp 失去作用基础：
- Flex 子项必须加
min-w-0（或min-w-[0px]），否则无视max-w-和line-clamp - Grid 子项同理，
min-w-0是前提，否则浏览器优先分配列宽而非折行 - 如果用了
break-words，建议和line-clamp-2组合使用，避免长单词（如 URL、UUID）撑破容器 - 中英文混排场景慎用
break-all——它可能在汉字中间硬切，break-words更安全
要不要装 @tailwindcss/line-clamp 插件
适合多处复用、团队协作、长期维护的项目。安装后需在 tailwind.config.js 的 plugins 数组里加入 require('@tailwindcss/line-clamp')。但它仍不能绕过浏览器限制：Firefox 完全不支持，iOS 13 及更早、部分安卓 WebView 也静默失效；真机测试比 DevTools 模拟器关键，尤其是低端安卓设备。
真正容易被忽略的点是：所谓“截断”，只是视觉隐藏，DOM 文本仍在，屏幕阅读器也能读到。如果业务要求语义上真正删减（比如防爬虫、数据脱敏），CSS 层面做不到，得用 JS 或服务端处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
