break-words和line-clamp-2失效并非类名错误，而是缺硬性前提：break-words需容器有明确宽度（如max-w-md）、非inline显示、无whitespace-nowrap或pre覆盖；line-clamp-2必须配合overflow-hidden、display:-webkit-box（插件注入）、max-h-类及Flex/Grid下min-w-0才能触发截断。
直接加 break-words 或 line-clamp-2 没反应，不是类名写错，而是缺了硬性前提条件——这些类本身不定义布局行为，只打包已有 CSS 声明，前提不满足就静默失效。
为什么 break-words 加了还不换行
它只在「容器宽度明确且内容超长」时才触发断词，否则完全静默。常见失效场景包括：
- 父容器没设
max-w-或w-类（比如只写了break-words却没给max-w-md） - 元素是
inline显示（如span），而break-words对纯inline元素支持弱；建议加block或inline-block - 祖先元素用了
whitespace-nowrap，直接覆盖了换行逻辑 - 文本在
pre、code或设置了white-space: pre的容器里，这些会锁死换行行为
line-clamp-2 静默失效的三个硬条件
它不是“最多两行”，而是“在指定高度内最多显示两行”。没高度限制，浏览器认为空间充足，根本不触发截断：
- 必须显式加
overflow-hidden（插件不会自动补） - 元素需为
display: -webkit-box（插件会加），但若父级用了flex或grid，会覆盖掉它 - 必须设
h-或max-h-类（如max-h-[3.6em]），仅靠line-clamp-2无法建立“溢出前提” - Flex 子项必须加
min-w-0，否则默认min-width: auto阻止收缩，导致高度计算失准
中英文混排或无空格字符串怎么处理
truncate 和 line-clamp 只管换行，不管单词内部断字。遇到 URL、UUID、日志 ID 这类无空格长串，它们会直接顶出容器边界：
立即学习“前端免费学习笔记（深入）”；
- 优先用
break-words+max-w-full+block组合，安全兜底 - URL / 路径类文本，加
overflow-wrap-anywhere（Tailwind v3.3+ 内置），允许在/、-、_后自然断行 - 纯数字哈希或 UUID，
break-words仍有效；慎用break-all，它会在任意字符间切开，复制粘贴失效 - 避免把
line-clamp和padding放在同一元素上——内边距干扰高度计算，可能导致省略号出现但多余文本仍挤到下一行
最常被忽略的是：所有换行与截断类都依赖「明确的宽度边界」和「可控的显示模式」。没有 max-w-、没关掉 whitespace-nowrap、没处理 Flex/Grid 的收缩限制，再好的类名也白搭。
