break-words需满足宽度约束、显示模式和样式上下文三条件才生效，缺一不可；它仅在整词放不下时找自然断点折行，不适用于inline元素或whitespace-nowrap容器，中文混排下慎用break-all。
直接加 break-words 能解决 80% 的长单词溢出问题，但它不是开关——必须满足宽度约束、显示模式和样式上下文三个条件才真正生效。
为什么 break-words 加了却不换行？
它根本没触发，不是类名写错，而是缺了“可断行的前提”：
- 父容器没设
max-w-或w-类（比如只写了break-words却没给max-w-md） - 元素是
inline显示（如<span></span>），而break-words在纯 inline 元素上不工作；建议加block或inline-block - 祖先或自身带了
whitespace-nowrap，它会直接压制所有换行行为 - 文本在
<pre class="brush:php;toolbar:false;"></pre>、<code>或设置了white-space: pre的容器里，这些样式优先级更高
break-words 和 break-all 到底怎么选？
两者语义完全不同，误用会破坏可读性：
-
break-words：只在整词放不下时，找自然断点（如/、.、-、_后）折行，保留 URL 和文件名结构。适合用户输入、路径、API 地址 -
break-all：无视任何边界，在任意字符间切断，哪怕把JavaScript拆成JavaS-crip-t。仅适合 UUID、base64、哈希值这类纯技术字段 - 中文混排下，
break-all可能在汉字中间硬切；break-words至少避开中文字符内部
URL 和路径类文本怎么自然断在斜杠或连字符后？
单纯 break-words 对 /、-、_ 不敏感，浏览器默认不视其为断点：
- 加
overflow-wrap-anywhere（Tailwind v3.3+ 内置）：允许在空格、/、-、_后断行，比break-words更激进，但比break-all有节制 - 组合写法更稳：
max-w-full break-words overflow-wrap-anywhere - 若需语义化连字符（如英文单词自动加
-），补hyphens-auto并确保<p lang="en"></p>，否则 Chrome/Firefox 不生效
Flex/Grid 子项里的长文本为何死活不换行？
这不是 break-words 失效，而是布局逻辑压过了文本逻辑：
- Flex 子项默认
min-width: auto，会阻止收缩；必须加min-w-0才能让break-words生效 - Grid 子项同理，
min-w-0是关键前提，否则浏览器优先撑开列宽而非折行 - 别指望
whitespace-normal解决问题——它只管空格折叠，不管长单词
最常被忽略的是：break-words 本身不定义宽度，它只是“守门员”，只在已有边界内工作；字体渲染细节（比如等宽字体对 - 的判定）也会悄悄影响断点位置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
