overflow-wrap: break-word 失效主因是容器无明确宽度约束或被布局压制；必须配合 max-width、min-width: 0（flex 子项）、white-space: normal 才能触发断行。
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 class="brush:php;toolbar:false;"></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 <code>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;，现代浏览器取后者，旧版回退前者。
移动端和 Safari 的特别注意点
iOS Safari 对 Flex + overflow-wrap 的组合支持一直偏弱，尤其在 min-width: fit-content 或嵌套 inline-flex 场景下容易失效。实际项目中建议：
- 移动端双写断行声明：
overflow-wrap: break-word; word-wrap: break-word;（后者是旧名，Safari 旧版本认这个） - 避免在
<span></span>这类内联元素上直接用，改用display: inline-block或包一层<div> <li>如果内容来自用户输入或第三方 API，别依赖 <code>hyphens: auto——它需要lang="en"且对中文、URL、base64 全无效，纯属锦上添花 - 测试时打开 Safari 开发者菜单 → “开发 → 禁用弹性盒子”，看是否恢复换行，能快速定位是不是 Flex 布局压制导致
最常被忽略的是：所有这些样式都必须写在**同一个元素**上，且该元素必须有明确的宽度上下文。脱离容器边界谈换行，就像没刹车踩油门——看着动，其实没用。
