单行溢出省略需同时满足：父容器有显式宽度、非Flex/Grid子项或已设min-w-0、truncate作用于直接承载文本的块级元素；多行省略须用line-clamp配合overflow-hidden和-webkit-box，且不支持响应式行数切换。
单行溢出省略直接用 truncate 类就行，但必须满足三个前提条件，缺一不可。
为什么加了 truncate 没反应？
最常见原因是父容器没设宽度或未触发 BFC。Tailwind 的 truncate 本质是三行 CSS：overflow: hidden、text-overflow: ellipsis、white-space: nowrap —— 但后两者只对**单行内联元素**生效，如果文本在 div 这类块级容器里，还必须让容器有明确宽度（比如 w-full）且不换行。
- 父容器必须有显式宽度（
w-64、max-w-sm、w-full等） - 不能是
display: flex或display: grid的子项且未设min-width: 0（Flex/Grid 项默认不收缩，会撑开容器） - 文本本身不能包裹在
span等内联元素里再套truncate（得作用在直接承载文本的元素上）
多行省略能不能用 truncate？
不能。truncate 是纯单行方案，硬套多行会把整段文字压成一行再截断，完全失去段落结构。真要两行或三行省略，得手动写：
line-clamp-2 overflow-hidden display-box -webkit-box-orient: vertical -webkit-line-clamp: 2
注意：line-clamp 是 CSS 实验性属性，Tailwind 默认不提供对应工具类（v3.4+ 可通过插件开启），且 Safari 旧版、IE 全系不支持。
- 务必加
overflow-hidden，否则超出部分仍可见 -
display: -webkit-box是必需的，仅靠-webkit-line-clamp不生效 - 行数只能是固定值，无法响应式切换（比如“手机1行、桌面2行”需媒体查询重写）
truncate 和手写 text-overflow: ellipsis 有啥区别？
没有本质区别，truncate 就是这三个声明的组合别名。但容易忽略的是：它不处理英文单词断行，长单词（比如 URL、UUID）会直接撑破容器。
- 若内容含不可分割长串，需额外加
break-all或break-word -
break-all会在任意位置断字，可能切开单词；break-word优先保单词，只在必要时断 - 中英文混排场景下，
break-word通常更安全
真正麻烦的不是加类，而是判断该不该加——比如一个 flex 布局里的标题，父容器没设 min-w-0，truncate 就永远不生效，这时候得去调 Flex 项的收缩行为，而不是反复试 CSS 类。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
