truncate或line-clamp-2失效的根本原因是缺失硬性前提：单行需block+宽度约束+whitespace-nowrap+overflow-hidden；多行需display:-webkit-box+overflow-hidden+max-h-类+min-w-0（flex子项），且padding、布局覆盖、浏览器兼容性（如firefox不支持）均会干扰。
直接加 truncate 或 line-clamp-2 没反应，不是类名写错，而是缺了硬性前提条件——这些类只打包 CSS 声明，不自动补布局逻辑。
为什么 truncate 加了却没省略号？
它只对单行生效，且必须三者共存：block（或 inline-block）、宽度约束（如 max-w-64）、whitespace-nowrap。漏掉任意一个都会静默失效。
-
span默认是inline，加truncate无效；得显式加block或inline-block - 父容器没设
max-w-类，或元素自身没宽（如w-48），浏览器无法判断“哪里算溢出” - 在
flex容器里用flex-1 truncate，但子项没加min-w-0→ flex 项目拒绝收缩，截断跳过 - 漏掉
overflow-hidden——truncate不含它，但省略号必须依赖隐藏溢出内容才能显示
为什么 line-clamp-2 还是显示三行？
多行省略不是“最多两行”，而是“在指定高度内最多显示两行”。没高度限制，浏览器认为空间充足，根本不触发截断。
- 必须显式加
overflow-hidden（插件不会自动补） - 元素需为
display: -webkit-box（插件会加），但若父级用了flex或grid，会覆盖掉它 - 没设
h-或max-h-类（如h-10），仅靠line-clamp-2无法建立“溢出前提” -
Flex子项必须加min-w-0，否则默认min-width: auto阻止收缩，导致高度计算失准
内边距（py-3、px-4）会让 line-clamp 失效吗？
会。padding 干扰行高测量，第三行可能“漏出来”。line-clamp 的 overflow-hidden 作用于整个元素盒，而 padding 是盒内的一部分，导致截断边界偏移。
- 稳妥做法：用一层干净
div包文本，只在这层加line-clamp-2 overflow-hidden - 内边距由外层控制，避免混用
line-clamp-2和py-3等 - 别把
line-clamp类直接加在flex或grid的直接子元素上，布局会压垮-webkit-box
中英文混排、长 URL、UUID 怎么折行才不破坏语义？
truncate 和 line-clamp 都不管单词内部断字。遇到无空格的中文段落、URL、UUID，整串直接顶出边界。
- 优先用
break-words：在自然断点（/、.、-、_后）折行，适合路径、API 地址 - 慎用
break-all：任意字符间切断，可能把JavaScript拆成JavaS-crip-t，仅适合 UUID、base64 - 中文场景下
break-all可能在汉字中间硬切；break-words至少避开中文字符内部 - 组合更稳：
line-clamp-2 break-words h-10或truncate break-words
真正容易被忽略的是：line-clamp 和 break-words 都不定义宽度，它们只是“守门员”，只在已有边界内工作。一旦容器宽度靠 JS 动态计算、或由 Grid 自动分配，就得手动塞 max-w-full 或 min-w-0 才能起效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
