truncate不生效是因为缺块级显示、宽度约束、whitespace-nowrap三要素；line-clamp-2需display:-webkit-box、overflow-hidden、显式高度及min-w-0（Flex/Grid中）。
truncate 类加了没反应？检查这三个硬性前提
不是类名写错，是 truncate 依赖的底层 CSS 规则缺一不可：元素必须是块级（block 或 inline-block），必须有宽度约束（如 max-w-48、w-64 或父容器 flex + overflow-hidden），还必须有 whitespace-nowrap。Tailwind 的 truncate 只是打包这三条，不自动补全布局行为。
常见失效场景：
- 给
直接加truncate→ 它仍是inline元素，不响应宽度类，也不触发截断逻辑 - 在
flex容器里用flex-1 truncate，但子项没加min-w-0→ flex 项目默认min-width: auto，拒绝收缩，宽度撑满，截断跳过 - 漏掉
overflow-hidden→truncate不含它，但省略号必须靠隐藏溢出内容才能显示
line-clamp-2 显示三行？高度限制才是关键
line-clamp-2 不是“最多两行”，而是“在指定高度内最多显示两行”。没高度约束，浏览器就认为空间充足，根本不会触发截断。
必须同时满足：
- 启用
@tailwindcss/line-clamp插件（v3.0+，tailwind.config.js中plugins: [require('@tailwindcss/line-clamp')]） - 元素被设为
display: -webkit-box（插件自动注入，但若父级用了flex或grid，会覆盖掉） - 显式设置
overflow-hidden（插件不自动加，必须手动写） - 必须带
h-或max-h-（如max-h-10、max-h-[3.6em]）——用em单位比像素更稳，避免受font-size和line-height影响错位
推荐写法：class="line-clamp-2 overflow-hidden max-h-[3.6em]"
Flex/Grid 容器里 line-clamp 失效？加 min-w-0 是必选项
在 flex 或 grid 布局中，子项默认 min-width: auto，会阻止自身收缩。即使你写了 line-clamp-2 和 max-h-10，只要子项宽度没压下来，高度计算就失准，截断静默失败。
解决方法很简单：
- 子元素加
min-w-0（或min-w-[0px]） - 如果子项是
flex本身，再加align-self: flex-start或min-h-0，防止它忽略max-h- - 不要指望父容器坍塌后的高度 ——
line-clamp需要明确的、可测量的高度边界
中英文混排或带 padding 的文本截断异常？用包裹层隔离
当 line-clamp-2 应用于带 py-2、px-3 的元素时，内边距会干扰 -webkit-box 对内容区域的计算，导致省略号出现但第三行文字仍“漏”出来。
这不是 Tailwind 的 bug，是 WebKit 截断机制与 padding 的固有冲突。最稳妥的解法是加一层内部包裹：
<div class="p-3 overflow-hidden">
<div class="line-clamp-2 max-h-[3.6em] overflow-hidden">
这是一段中英文混排的超长文本...
</div>
</div>
这样 padding 由外层承担，截断逻辑在内层干净执行。如果还要支持 Firefox（它完全不支持 -webkit-line-clamp），就得接受它不截断，或加 title 属性兜底提示。
真正容易被忽略的是：所有这些类都只是快捷方式，不是魔法。它们不改变布局上下文，也不修复父级约束缺失。一旦遇到失效，优先查 display、width、height、overflow、min-w 这五个点，而不是怀疑类名或重装插件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
