加了 truncate 没反应，是因为缺三个硬性条件：元素必须是块级、有固定宽度（或受父容器约束）、且 white-space: nowrap；truncate 仅打包 overflow-hidden、white-space-nowrap、text-overflow: ellipsis，不自动补宽或改 display。
加了 truncate 没反应，到底缺什么？
不是类名写错了，是三个硬性条件没凑齐：truncate 只是打包了 overflow-hidden、white-space-nowrap 和 text-overflow: ellipsis，但不会帮你补宽度或改 display。
- 元素必须是块级（比如
div、p；span默认 inline，加block才生效） - 必须有明确宽度限制：直接加
max-w-48，或父容器是flex+overflow-hidden+ 宽度约束 - 子项在 flex 容器里要加
min-w-0，否则默认min-width: auto会阻止收缩
常见错误：在 flex 里写 flex-1 truncate 却不加 min-w-0，结果文本撑满整行，根本没机会溢出。
想截两行，line-clamp-2 为啥还是显示三行？
line-clamp-2 不是“最多两行”，而是“在指定高度内最多显示两行”——它依赖浏览器对 -webkit-box 的渲染逻辑，缺一不可。
- 必须启用插件：
tailwind.config.js的plugins数组里加require('@tailwindcss/line-clamp') - 元素不能是
flex或grid的直接子项（会覆盖display: -webkit-box） - 必须显式设高度：
h-10或max-h-10，仅靠line-clamp-2不够 - 别加
white-space-nowrap，否则退化成单行裁切
Firefox 完全不支持，这不是配置问题，是浏览器能力缺失。别试图用 CSS 兜底，该上 JS 就上 JS。
立即学习“前端免费学习笔记（深入）”；
中英文混排、长 URL 或 UUID 溢出怎么办？
truncate 和 line-clamp 都只管换行，不管单词内部断字。遇到无空格字符串，它们直接放弃治疗。
- 优先用
break-words：按字/词边界折行，中文友好，英文保留可读性 - 紧急情况用
break-all：强制在任意字符处断，适合日志 ID、base64 等，但可能把单词劈开 - 表格里长 URL 建议套一层
<div class="break-all max-w-xs"></div>，比全局设break-all更可控
注意：break-words 在 flex 容器里仍需配合 min-w-0，否则 flex 项目拒绝收缩，断行失效。
overflow-x-auto 滚动区域里文字还是溢出？
横向滚动容器本身不解决内部文本溢出，只是提供滚动通道。如果子元素（比如 td）内容太宽，滚动条会出现，但体验可能卡顿或内容被裁掉一半。
- 给
td或th加whitespace-normal（默认就是）+break-words，避免长单词撑破列宽 - 表格用
table-fixed+w-full，再给关键列设min-w-0，防止内容强行拉宽整列 - 移动端加
touch-pan-x，否则 iOS Safari 上拖不动；别同时用scroll-snap-x，部分安卓 WebView 会失灵
最易忽略的点：滚动容器外层若用了 transform 或 will-change，会创建新层叠上下文，导致 sticky 表头失效，也会影响 overflow 边界计算——这种问题调试起来极隐蔽。
