truncate仅支持单行截断，line-clamp需手动启用插件并满足overflow-hidden、块级元素、明确高度约束三条件才生效；Firefox旧版不支持需兜底方案。
直接说结论：truncate 只能用于单行截断，@tailwindcss/line-clamp 才能控制多行——但后者不是开箱即用，漏掉任一条件都会“看起来没效果”。
为什么 truncate 类不生效？常见三类原因
很多人加了 truncate 却看不到省略号，根本不是类名写错，而是缺了底层支撑：
-
truncate要求元素必须有明确宽度限制（比如父容器设了w-full或固定w-64），否则文本不会溢出 - 它只对块级或行内块元素起作用；纯
<span></span>默认是 inline，得手动加inline-block或block - 如果元素用了
flex、grid或absolute定位，可能破坏white-space: nowrap的作用域，需检查 computed styles 中是否真应用了该声明
line-clamp-2 为什么加了也不截断？三个硬性条件
line-clamp-2 不是独立样式，它依赖一组协同 CSS 规则。插件会自动注入 display: -webkit-box 和 -webkit-box-orient: vertical，但以下两点必须手动加：
- 必须显式写
overflow-hidden—— 这是新手最高频遗漏项 - 容器必须有可触发溢出的高度约束，推荐用
max-h-[3.6em]（对应 2 行 × line-height 1.8），而不是h-10这类像素值，后者极易因字体渲染差异失效 - 若父容器是
flex，子元素需加align-self-start或min-h-0，否则 flex item 会忽略max-height
Firefox 下 line-clamp 失效怎么办？没有纯 CSS 解法
@tailwindcss/line-clamp 底层靠 -webkit-line-clamp，Firefox 直到 v128（2024 年中）才开始支持，旧版完全静默失效——这不是配置问题，是浏览器能力缺失。
立即学习“前端免费学习笔记（深入）”；
你只能选其一：
- 接受 Firefox 下不截断（加注释说明设计预期，多数业务场景可接受）
- 服务端预截断：适合静态内容，按字符数 + 字体宽度估算后截取
- 客户端 JS 方案（如
react-lines-ellipsis），但要注意首次渲染闪动和 SEO 影响
别试图用伪元素 + 渐变遮罩“模拟”省略号，那只是视觉欺骗，文本流仍在，可复制、可聚焦、无障碍阅读器照读全文。
自定义行数和响应式变体怎么配？别漏 variants
默认只提供 line-clamp-1 到 line-clamp-6，要扩展到 10 行，光在 theme.extend.lineClamp 里加还不够：
- 必须同时配置
variants.lineClamp = ['responsive', 'hover']，否则md:line-clamp-5或hover:line-clamp-none不会生成 CSS - 如果你用的是 Tailwind v3.3+，确保开发服务器已重启——热更新不识别插件配置变更
- 自定义值建议用字符串（如
'7'），避免数字类型被 PostCSS 误处理
最易被忽略的一点：插件生成的 CSS 是基于 -webkit- 前缀的，它和 Flex/Grid 布局天然互斥。一旦元素上了 flex，就别指望 line-clamp-x 能工作——得换思路，比如把截断逻辑移到子容器上。
