truncate类不生效主因是缺块级显示、宽度限制和white-space:nowrap；必须手动加overflow-hidden，Flex/Grid子项需min-w-0，line-clamp需配max-h和overflow-hidden，Firefox不支持-webkit-line-clamp。
truncate 类不生效，基本是因为缺了三样东西：块级显示、宽度限制、white-space: nowrap。它不是“加了就管用”的魔法类，而是对已有 CSS 规则的快捷打包。
为什么 truncate 加了但没省略号
最常见的情况是元素仍是 inline（比如 span），或父容器没设宽度，或漏了 overflow-hidden —— 而 truncate 本身不带 overflow-hidden，必须手动补上。
-
span、a等默认 inline 元素加truncate无效；得配合block或inline-block - 父容器是
flex，子项用了flex-1 truncate却没加min-w-0→ Flex 项目默认不收缩，文字把容器撑开，截断逻辑跳过 - 直接写
<div class="truncate">文本</div>，但没设max-w-或w-类 → 浏览器不知道“多宽算溢出” - 忘了加
overflow-hidden→text-overflow: ellipsis必须配合隐藏溢出才生效
在 Flex 布局里用 truncate 必须加 min-w-0
Flex 容器里的子项默认有 min-width: auto，会阻止内容收缩，哪怕你写了 truncate 和 max-w-xs，它也优先撑满可用空间。
- 正确写法：
<div class="flex"><div class="min-w-0 truncate max-w-xs">超长标题</div></div> - 如果子项还用了
flex-1，min-w-0依然不能省——flex-1不自动覆盖min-width - Grid 布局同理，子项也要加
min-w-0才能响应truncate
line-clamp-2 显示三行？不是 bug，是缺高度约束
line-clamp-2 的意思是“在指定高度内最多显示两行”，不是“强制只占两行”。没设 h- 或 max-h-，浏览器就认为空间无限，根本不会触发截断。
立即学习“前端免费学习笔记（深入）”；
- 必须配
max-h-10或h-10（具体值按行高估算，比如text-sm行高约 1.25rem，两行 ≈max-h-6） - 必须加
overflow-hidden—— 插件不自动补，漏了就会看到第三行“漏出来” - 别在有
padding的元素上直接用line-clamp-2；内边距干扰高度计算，推荐套一层无 padding 的<div class="line-clamp-2 max-h-10 overflow-hidden"></div> - Firefox 不支持
-webkit-line-clamp，所以line-clamp-N在 Firefox 里静默退化为不截断（不是报错，是啥也不干）
真正容易被忽略的是：所有这些类都依赖 content 配置是否扫到了当前文件。如果 truncate 或 line-clamp-2 在浏览器里完全搜不到对应 CSS 规则，先检查 tailwind.config.js 的 content 数组有没有包含你的模板路径，改完记得重启 dev server。
