truncate 不支持多行截断，因其强制 white-space: nowrap 与 line-clamp-2 冲突；正确方案是用 line-clamp-2 配合 overflow-hidden、display: -webkit-box 等完整声明，并确保容器有高度限制。
因为 truncate 本质是单行截断专用工具，它强制启用 white-space: nowrap，直接锁死换行能力——多行场景下它根本不会尝试计算行高或布局，自然无法生效。
truncate 的三条规则缺一不可，但其中一条就和多行互斥
truncate 等价于以下三者同时存在：
-
overflow-hidden：隐藏溢出内容 -
whitespace-nowrap：禁止文本换行 -
text-overflow-ellipsis：显示省略号
关键点在于第二条：whitespace-nowrap 让所有文字挤在一行里。哪怕你加了 line-clamp-2 或手动写 -webkit-line-clamp: 2，浏览器会按层叠规则丢弃冲突声明，最终只保留 nowrap，结果就是：文本不换行 → 不可能“最多两行” → 截断逻辑完全跳过。
line-clamp-2 和 truncate 不能混用
这两个类底层机制完全不同，强行叠加只会互相干扰：
立即学习“前端免费学习笔记（深入）”；
-
truncate依赖nowrap+ 宽度限制，只看“横向溢出” -
line-clamp-2依赖-webkit-box+ 垂直方向高度限制，只看“纵向行数” - 同一元素上同时声明
display: -webkit-box和white-space: nowrap，WebKit 会优先执行后者，导致-webkit-line-clamp彻底失效 - 控制台不会报错，但 DevTools 里能看到
-webkit-line-clamp被划掉（strikethrough）
Flex/Grid 容器里 truncate 更容易“假装生效”
在 flex 或 grid 子项中加 truncate，有时看似能截断，其实是假象：
- 子项未加
min-w-0→ 默认min-width: auto阻止收缩 → 文本被压缩到极窄宽度后才触发nowrap截断，看起来像“多行被压成一行” - 实际只是字挤在一起、阅读困难，并非按语义分行控制
- 一旦文本含长单词（如 URL、UUID）或中文无空格段落，
truncate会直接顶破容器边界，连省略号都不显示
真正需要多行截断时，必须切换方案
别试图“修复” truncate，它不是为多行设计的。正确路径是：
- 明确放弃
truncate，改用line-clamp-2（需补全overflow-hidden、display: -webkit-box、-webkit-box-orient: vertical） - 若要兼容 Firefox，得额外加
max-h-[Xem]+line-height+::after伪元素模拟（无原生省略号） - 避免在带
padding的元素上直接用line-clamp-2，用一层干净<div>包住文本，只在这层加截断类
最易忽略的一点：多行截断不是“最多 N 行”，而是“在固定高度内最多显示 N 行”。漏掉 h- 或 max-h- 类，line-clamp-2 就是摆设。
