truncate和line-clamp-2失效的根本原因是缺失硬性前提：单行截断需block+width+whitespace-nowrap+overflow-hidden；多行截断需-webkit-box+overflow-hidden+高度限制+min-w-0（Flex/Grid中）。
truncate 和 line-clamp 类本身不保证生效，必须补全硬性前提条件。直接加类没反应，不是 Tailwind 有问题，而是浏览器渲染机制被卡住了。
单行截断为什么truncate不显示省略号？
它只打包了三条声明，但不负责布局上下文。缺一不可的三个条件是：
- 元素必须是块级或
inline-block（span默认是inline，得加block或inline-block） - 必须有明确宽度约束：用
w-48、max-w-sm或w-full等，纯flex-1不够 - 父容器若为
flex，子项需加min-w-0，否则 flex 会阻止收缩，溢出判断失效
常见错误写法：<div class="flex"><span class="truncate">长文本</span></div> —— 这里 span 既没设显示类型，也没宽度，还没处理 flex 干预，三重失效。
多行截断用line-clamp-2却显示三行？
因为 line-clamp 不是“最多两行”，而是“在指定高度内最多显示两行”。它依赖浏览器私有机制，必须同时满足：
立即学习“前端免费学习笔记（深入）”；
-
display: -webkit-box（Tailwind 不自动加，插件或手动补） -
-webkit-box-orient: vertical（必须显式写，不能省） -
overflow: hidden（line-clamp类不包含它） - 显式高度限制：
h-10或max-h-12，仅靠行数声明无法触发截断 - 若在
flex或grid直接子项中使用，需给该元素加min-w-0防止布局干扰
最简可靠写法（不装插件）：
.clamp-2 {
@apply block overflow-hidden text-ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
什么时候该用truncate而不是line-clamp-1？
优先用 truncate。原因很实际：
-
truncate是标准 CSS 属性组合，IE9+ 全支持；line-clamp-1虽然也能用，但它背后仍走-webkit-box流程，多一层兼容风险 -
truncate更轻量，无额外 display 切换，不会和父级 flex/grid 冲突 - 当你要截的是表格单元格（
td）、按钮内文案、或响应式卡片标题时，truncate+max-w-full组合更稳定
别为了统一写法强行用 line-clamp-1 —— 它不是 truncate 的替代品，而是多行方案的延伸。
真正容易被忽略的点：所有截断效果都依赖「内容宽度 > 容器可用宽度」这一事实。如果字体缩放、zoom 变化、或 viewport 切换导致计算偏差，省略号可能突然消失或提前出现。线上环境务必在真实设备尺寸下验证，不能只看开发工具模拟。
