line-clamp类不会自动生效，必须手动启用插件、补全overflow-hidden、避开display冲突；常见失效原因包括未加overflow-hidden、用于flex/grid子项、父容器高度未限定、元素设white-space:nowrap。
line-clamp 类不会自动生效，必须手动启用插件、补全必要样式、避开 display 冲突，否则写了也白写。
为什么加了 line-clamp-2 却没截断
最常见原因是漏了 overflow-hidden——line-clamp 插件不自动加它，而浏览器必须靠这个才能裁剪内容。另外三个关键点：
-
line-clamp-x只对块级元素生效，不能用在flex或grid子项上直接起作用 - 父容器不能是
min-content高度，得有明确max-h-[Xem]或h-限制，否则无“溢出”可截 - 元素自身不能设
white-space: nowrap（那是truncate的路子），否则强制单行，line-clamp直接失效
怎么正确启用和使用 line-clamp 插件
Tailwind v3.3+ 才支持，且不是开箱即用：
- 运行
npm install -D @tailwindcss/line-clamp - 在
tailwind.config.js的plugins数组里加require('@tailwindcss/line-clamp') - 改完必须重启开发服务器，热更新不识别新插件
- 类名是
line-clamp-1、line-clamp-2，不是clamp-2或text-clamp
line-clamp 在 Flex 容器里为啥失效
Flex 子项默认 min-width: auto，会撑开容器导致高度计算错乱。解决方案不是调父容器，而是修子项：
立即学习“前端免费学习笔记（深入）”；
- 给应用
line-clamp-2的元素同时加min-w-0（防止 flex 项目拒绝收缩） - 如果父容器是
flex且设了py-2这类内边距，建议把line-clamp移到内部div上，别直接贴在带 padding 的外层元素上 - 避免和
align-items: center同时用，它会让子项垂直居中，破坏max-h的截断基准线
中文混排和跨浏览器的坑
line-clamp 在 Chrome/Safari 表现一致，但 Firefox（v128 之前）完全不支持，且中文场景容易出问题：
- 长中文段落没空格时，得配
break-words（不是break-all），否则可能整段挤成一行，line-clamp根本不触发 -
max-h-[3.6em]比h-10更稳——因为line-clamp截的是“行数”，不是像素，em能随line-height自适应 - Firefox 用户看到的是完整换行文本，没有降级方案能纯 CSS 实现等效效果；JS 方案（如
clamp()库）会有闪动，且影响 SSR 渲染
