<p>break-words 仅在容器有明确宽度限制且内容超出时生效；需配合 max-w-/w- 类、非 inline 显示及无 whitespace-nowrap 覆盖才能正常工作。</p>
为什么加了 break-words 还是不换行？
不是类名写错了，而是它根本没触发条件。break-words 只在「容器有明确宽度限制 + 内容超出该宽度」时才生效。它不会主动收缩父容器，也不会在 display: inline 元素上可靠工作。
- 检查是否漏了
max-w-或w-类（比如max-w-md），没有宽度约束，break-words就像没装保险丝的开关 - 确认元素不是
inline显示：span、a默认是inline，得加block或inline-block才能启用断词逻辑 - 排查祖先元素有没有
whitespace-nowrap—— 它会直接覆盖break-words的行为，哪怕只加在父级div上也管用
whitespace-normal 和 break-words 到底谁管什么？
whitespace-normal 控制空格和换行符怎么处理（合并空格、忽略换行符、允许自动换行），而 break-words 是专门解决“整词放不下”的问题。两者不是替代关系，是协作关系。
-
whitespace-normal是默认行为，多数时候不用显式加；但它不能解决https://a-b-c-d-e-f-g-h-i-j-k-l-m-n-o-p-q-r-s-t-u-v-w-x-y-z.example.com这种无空格长串溢出 -
break-words补的是这个缺口：它让浏览器在必要时把长单词/URL 拆开，但优先选连字符（-）、斜杠（/）后这种语义合理的位置 - 典型组合：
max-w-md whitespace-normal break-words—— 先定边界，再保空格规则，最后处理极端长串
什么时候该用 break-all 而不是 break-words？
break-all 是暴力断行，break-words 是有节制断行。选哪个，取决于内容是否需要保持可读性或复制可用性。
- 用
break-all：纯哈希值（sha256:abc123...）、UUID、Base64 字符串 —— 这些本来就不该被人工阅读，断在哪都无所谓 - 别用
break-all：URL、文件路径、带连字符的 API 端点 —— 它可能把/api/v2/users断成/api/v2/u+sers，复制粘贴就失效 - 注意中文场景：两者对中文效果接近（中文本就以字为单位断），但英文混排时
break-all容易割裂单词，用户一眼就能察觉排版失控
URL 换行总在奇怪位置断开？试试 overflow-wrap: anywhere
Tailwind v3.3+ 支持 overflow-wrap-anywhere 类，它比 break-words 更懂 URL 结构：能在空格、连字符、斜杠、点号后自然停顿，而不是硬等“单词超长”才动刀。
立即学习“前端免费学习笔记（深入）”；
- 原生
break-words对https://example.com/a-b-c-d-e-f-g可能整个当一个词，直到撑破容器才在中间切 -
overflow-wrap-anywhere会倾向在https://后、/a-b-c-中的-后、.com/后这些地方换行 - 写法：
max-w-sm break-words overflow-wrap-anywhere（注意：需 Tailwind ≥ v3.3，旧版需手写 CSS 或插件）
overflow-wrap: break-word 的支持虽已稳定，但旧版 Safari（≤15.4）仍依赖 word-wrap: break-word 回退写法。如果项目还要兼容这类设备，得在自定义 CSS 里补一句。 
