line-clamp 失效主因是未设置 overflow-hidden、display 冲突或父容器高度未限制；需显式声明 overflow-hidden，Flex 子项加 min-w-0，避免 padding 干扰，Firefox 需 break-words 且 v128 前不支持。
line-clamp 类写了但没截断？不是 bug，是漏了关键约束条件——90% 的失效都卡在 overflow-hidden、display 冲突或父容器高度没封死这三处。
为什么 line-clamp-2 加了却还显示三行
浏览器根本没触发省略逻辑，因为 line-clamp-x 不是独立开关，它依赖一组底层 CSS 协同生效。最常被忽略的是：overflow: hidden 必须显式加，Tailwind 插件不会帮你补。
- 漏掉
overflow-hidden：文本照常渲染，只是没裁剪，省略号永远不会出现 - 元素是
inline或flex子项且没设min-w-0：flex 项目默认不收缩，宽度撑开导致“没溢出” - 父容器用
min-content、h-auto或没设任何高度限制：没有“超出”的前提，line-clamp 直接跳过 - 元素自己带
white-space: nowrap（比如用了truncate）：强制单行，和多行截断互斥
line-clamp 插件必须手动启用且重启服务
v3.3+ Tailwind 才支持 @tailwindcss/line-clamp，但它默认关闭，装完不配等于白装。
- 运行
npm install @tailwindcss/line-clamp -D（或yarn add @tailwindcss/line-clamp --dev） - 在
tailwind.config.js的plugins数组里加require('@tailwindcss/line-clamp') - 改完配置必须 重启开发服务器，热更新不识别插件注册变更
- 类名严格为
line-clamp-1到line-clamp-6，写成clamp-2或text-clamp都无效
在 Flex 容器里用 line-clamp 的正确姿势
Flex 子项的默认行为会破坏 line-clamp 的高度计算，直接加类大概率失效。
立即学习“前端免费学习笔记（深入）”；
- 给应用
line-clamp-2的元素同时加min-w-0，防止它拒绝收缩 - 别把
line-clamp和py-2、px-4这类内边距放在同一个元素上——padding 干扰行高测量，第三行文字可能“漏出来” - 稳妥做法：用一层干净的
<div>包文本，line-clamp-2和overflow-hidden只加在这层上，内边距由外层控制 - 避开
align-items: center，垂直居中会偏移截断基准线，导致少显示半行
中文混排和 Firefox 兼容性的真实底线
line-clamp 在 Chrome/Safari 表现一致，但 Firefox v128 之前完全不支持，且中文场景有硬伤。
- 长中文无空格时，必须配
break-words（不是break-all），否则整段挤成一行，line-clamp 失效 - Firefox 用户看到的是完整换行文本，纯 CSS 无等效降级；JS 方案（如
clamp()库）有闪动、影响 SSR，不推荐用于首屏内容 - 别用
h-10限定高度，改用max-h-[3.6em]——line-clamp 截的是“行数”，em 能随line-height自适应 - 实际行数受
font-size、line-height、甚至字体上升高度影响，设line-clamp-2但line-height: 3，可能只显示 1 行半
真正容易被忽略的是布局污染：line-clamp 不是一个“贴上就灵”的装饰类，它对容器的 display、padding、height 都敏感。宁可多套一层 div，也不要为了省代码把 line-clamp 和样式逻辑耦合在一起。
