overflow-wrap: break-word 不生效的根本原因是未满足触发条件：内容宽度超过容器可用宽度，而后者需容器有明确 width 或 max-width；Flex 布局中还需配合 min-width: 0 和 max-width: 100% 才能生效。
overflow-wrap: break-word 为什么加了也不生效
写了 overflow-wrap: break-word 却没换行，大概率不是属性写错了，而是它根本没被触发。这个属性只在“内容宽度 > 容器可用宽度”时才介入，而判断依据是容器有没有明确的 width 或 max-width。如果父容器是 display: flex 且子元素没设尺寸约束，或者用了 width: auto、flex-basis: auto，浏览器就认为“永远装得下”，断行逻辑直接跳过。
常见干扰项包括：
-
white-space: nowrap—— 直接禁用所有换行，哪怕写了overflow-wrap也无效 - Flex 子元素没加
min-width: 0—— 默认min-width: auto锁死最小宽度，撑开父容器 - 目标元素是
inline或inline-block—— 换行行为受限，建议显式设为display: block - 内容在
<pre>标签里 —— 默认white-space: pre，需额外加white-space: pre-wrap
Flex 布局中必须配的三件套
在 Flex 容器里让长单词安全换行，单靠 overflow-wrap: break-word 不够，得和另外两个样式协同作用，缺一不可：
-
min-width: 0—— 加在 Flex 直接子元素上，解除默认的min-width: auto锁定 -
max-width: 100%（或具体值如max-width: 300px）—— 给浏览器一个“装不下”的参照基准 -
overflow-wrap: break-word—— 真正执行断行的指令，写在同一元素上
min-width: 0 必须作用于 Flex 的直接子元素；如果中间嵌了一层 <div>，它就完全失效。开发者工具里检查 computed min-width 是否真为 0px，比肉眼确认更可靠。
立即学习“前端免费学习笔记（深入）”；
overflow-wrap: break-word vs anywhere：选哪个
两者都解决溢出，但行为逻辑不同，选错会影响语义和布局稳定性：
-
overflow-wrap: break-word是保守策略：先尝试按空格、斜杠、点号等自然分隔符换行（比如把https://example.com/path折在/后），实在不行才切单词内部 -
overflow-wrap: anywhere更激进：只要放不下，立刻在任意字符间断，哪怕APIKey变成APIK ey，且它会改变min-content计算（可能让容器缩到单字符宽）
生产环境优先用 break-word；anywhere 适合固定列宽表格、日志面板等对可读性要求低的场景。兼容性上，break-word 支持 IE10+，anywhere 在 Safari 15.4+、Chrome 82+ 才稳定。老项目双写无害：overflow-wrap: break-word; overflow-wrap: anywhere;，现代浏览器取后者，旧版回退前者。
word-break: break-all 的适用边界与风险
word-break: break-all 会在任意两个字符之间断，包括 J 和 a、1 和 2，对中文无效（汉字本来就能断），但对英文缩写、API 名、base64 片段杀伤力极强。
- 适合：
<td class="id-column">a1b2c3d4e5f6g7h8i9j0</td>这类固定列宽的技术字段 - 不适合：
<p>请调用我们的 UserAuthentication API 获取令牌</p>
别和 white-space: nowrap 同时用——后者禁止换行，前者想断行，冲突。也别漏掉 max-width，否则小屏幕下文字挤成一团，行高失真。真正难处理的不是属性本身，而是它和 display、white-space、flex、table-layout 的组合效应，尤其在 Safari 上表现不稳定，测试时建议关掉弹性盒子临时验证。
