overflow-wrap: break-word 未生效主因是未满足触发条件：容器需有明确 width 或 max-width，且需配合 min-width: 0（Flex 子元素）和 max-width: 100% 协同作用，同时排除 white-space: nowrap 等干扰。
overflow-wrap: break-word 为什么加了也不生效
写了 overflow-wrap: break-word 却没换行，大概率不是写错了，而是它根本没被触发。这个属性只在「内容宽度 > 容器可用宽度」时才介入，而判断依据是容器有没有明确的 width 或 max-width。
常见干扰项包括：
-
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 布局中必须配的三件套
在 display: 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> - 别和
overflow: hidden搭配用——会直接截掉末尾，不如让其换行 - 不要和
overflow-wrap混用，word-break: break-all会覆盖后者逻辑，变成无差别切字
真正容易被忽略的是：它不依赖容器宽度是否明确，但语义破坏是不可逆的——一旦上线，用户看到的可能是被硬切的 ReactCompo + nent，而不是完整词。这种风险在用户生成内容（UGC）场景下尤其隐蔽。
