truncate失效是因为缺少块级显示、明确宽度和white-space: nowrap三要素；line-clamp-2不生效则多因未设高度或display:-webkit-box被flex等布局覆盖。
truncate 加了没反应？不是类名写错，是缺了块级、定宽、whitespace-nowrap 三要素；line-clamp-2 不生效？大概率是没设 height 或被 flex 覆盖了 display: -webkit-box。
为什么 truncate 类经常失效
它只是打包了三条 CSS 声明，不是独立魔法开关：overflow-hidden、text-overflow-ellipsis、white-space-nowrap。任一前提缺失都会静默失败：
- 元素是
span这类 inline 元素 → 必须加block或inline-block - 父容器没设
max-w-类或固定宽度（如max-w-md）→truncate没边界可依 - 在 flex 容器里用了
flex-1 truncate却没加min-w-0→ 子项拒绝收缩，宽度撑满 - 父容器漏了
overflow-hidden（尤其当子项是绝对定位时）→ 溢出内容逃逸到可视区外
line-clamp-2 在多行场景下的硬性条件
这个类依赖 WebKit 的私有机制，不是纯 CSS 标准，必须同时满足：
- 显式设置高度：用
h-10或max-h-12，不能只靠min-h-或自适应高度 - 不与
flex、grid、inline等 display 值共存 → 它需要display: -webkit-box，而插件注入的样式容易被覆盖 - 避免手动写
white-space: nowrap→ 多行截断必须允许换行，否则退化成单行 - 中英文混排时，需补
break-words，否则中文段落或 UUID 直接顶出容器
长单词溢出时，break-words 和 break-all 怎么选
语义差异极大，选错会破坏可读性甚至复制体验：
立即学习“前端免费学习笔记（深入）”；
-
break-words：只在整词放不下时找自然断点（如/、-、_后），适合 URL、路径、文件名 -
break-all：任意字符间切断，哪怕把JavaScript拆成JavaS-crip-t，仅适合 UUID、base64、哈希值 - 中文混排慎用
break-all→ 可能在汉字中间硬切；break-words至少避开中文内部 - 想更激进但仍有节制？Tailwind v3.3+ 支持
overflow-wrap-anywhere，对/和-更敏感
表格和 Flex/Grid 里的文本截断特别坑在哪
布局逻辑会压倒文本逻辑，光加类名没用：
- 表格单元格默认
min-width: auto→ 长文本撑宽整列，必须给td加min-w-0 - Flex 子项默认
min-width: auto→ 同样要加min-w-0才让truncate或break-words生效 - Grid 子项同理，
min-w-0是关键前提，否则浏览器优先撑开列宽 -
<pre class="brush:php;toolbar:false;"></pre>或<code>里加break-words无效 → 它们自带white-space: pre，优先级更高
最常被忽略的是：break-words 和 truncate 都不定义宽度，它们只是“守门员”，只在已有边界内工作；字体渲染细节（比如等宽字体对连字符的判定）也会悄悄影响断点位置。
