单行截断需同时满足：元素为块级或内联块、设置明确宽度（如w-48或max-w-xs）、white-space: nowrap未被覆盖；多行截断需启用@tailwindcss/line-clamp插件，并手动添加display: -webkit-box、-webkit-box-orient: vertical、overflow-hidden及高度限制。
直接加 truncate 或 line-clamp-2 没反应，不是类名写错了，而是缺了硬性前提条件——这些类只打包 CSS 声明，不自动补布局约束。
单行截断为什么没省略号？
根本原因就三个：元素不是块级、没设宽度、white-space: nowrap 被覆盖。Tailwind 的 truncate 类等价于 overflow-hidden whitespace-nowrap text-overflow-ellipsis，但它不改元素的 display 类型。
-
span默认是 inline 元素，加truncate无效；得显式加block或inline-block - 父容器是 Flex 布局时，子项默认
min-width: auto，会撑开宽度，必须加min-w-0才能触发截断 - 没设
w-或max-w-类（如max-w-xs），浏览器无法判断“哪里算溢出”，overflow-hidden就没作用对象 - 如果用了
line-clamp-1，不如直接用truncate——更轻量，兼容性更好（IE9+ 都支持）
多行截断 line-clamp-2 失效的真正原因
Tailwind 默认不提供完整多行截断能力。line-clamp-2 这个类名本身不会生成任何 CSS，除非你装了插件并启用它。即使启用了，也必须手动补全三样东西：display: -webkit-box、-webkit-box-orient: vertical、overflow-hidden，缺一不可。
- 未安装插件时，
line-clamp-2是无效类名，编译后无对应样式 - 装了
@tailwindcss/line-clamp插件后，仍需搭配overflow-hidden和高度限制（如max-h-[3.6em]），否则浏览器认为“空间充足”，不触发截断 - 父容器是
flex或grid时，子项必须加min-w-0，否则-webkit-box布局被覆盖，静默失效 - Firefox 完全不支持
-webkit-line-clamp，该方案在其中静默降级为不截断——这不是 Tailwind 的问题，是浏览器能力缺失
中英文混排或长单词撑破容器怎么办？
truncate 和 line-clamp 都不管单词内部断字。遇到无空格的 URL、UUID、中文长段落，整串直接顶出边界。
- 优先用
break-words：在自然断点（/、.、-、_后）折行，适合路径、API 地址 - 慎用
break-all：任意字符间切断，可能把JavaScript拆成JavaS-crip-t，仅适合 UUID、base64 - 中文场景下
break-all可能在汉字中间硬切，破坏阅读；break-words至少避开中文字符内部 - 组合更稳：
truncate break-words或line-clamp-2 break-words max-h-[3.6em]
Flex/Grid 容器里文本死活不截断？
不是类失效，是布局逻辑压过了文本逻辑。Flex/Grid 子项默认 min-width: auto，拒绝收缩，break-words 和 line-clamp 都需要“可压缩空间”才能工作。
- Flex 子项必须加
min-w-0（或min-w-[0px]），否则无视宽度限制强行撑开 - Grid 子项同理，
min-w-0是前提，否则浏览器优先分配列宽而非折行 - 若容器有
padding（如py-2 px-3），line-clamp的高度计算容易偏移，建议用包裹一层内联元素（如<span class="line-clamp-2">...</span>）隔离 padding 影响 - iOS Safari 14+ 和主流安卓 WebView 大多支持，但 iOS 13 及更早、部分 Android 6.0 系统浏览器会完全忽略
-webkit-line-clamp——真机测试比 DevTools 模拟器更关键
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
