overflow-wrap: break-word 并非简单换行开关，而是仅在整词无法容纳时才断词的兜底策略；失效主因包括容器无宽度限制、white-space: nowrap 抑制、inline 元素未转块级、flex/grid 子项 min-width: auto 撑宽及 pre 标签默认行为。
overflow-wrap: break-word 为什么经常不生效
它不是“开启换行”的开关，而是“兜底断词”策略：只在整词放不下时才切开，但前提是浏览器能识别出“哪里放不下”。常见失效原因包括：
-
max-width或width缺失——容器无限宽，浏览器没换行动机 - 祖先元素设了
white-space: nowrap——直接压制所有子级换行行为 - 元素是
<span></span>或<a></a>这类 inline 级元素，且未声明display: block或inline-block - 父容器是 flex 或 grid，子项默认
min-width: auto，会撑开容器而非换行 - 内容在
<pre class="brush:php;toolbar:false;"></pre>里，默认white-space: pre，overflow-wrap不触发
纯英文长串（如 URL、token）必须用的最小组合
单独写 overflow-wrap: break-word 基本无效。真正起效需三件套齐上：
- 给容器加明确宽度约束：
max-width: 100%（响应式场景）或具体值如max-width: 300px - 显式重置换行许可：
white-space: normal（不能依赖继承） - 解除 flex/grid 的压缩锁定：
min-width: 0（现代写法也可用min-inline-size: 0）
完整示例：
div.url-display {
max-width: 100%;
white-space: normal;
min-width: 0;
overflow-wrap: break-word;
}
word-break: break-all 和 overflow-wrap: anywhere 怎么选
两者都比 break-word 更激进，但适用场景不同：
-
word-break: break-all：强制在任意字符间断，适合哈希值、UUID、base64 等纯展示字段，但会把JavaScript切成JavaS-crip-t，破坏可读性 -
overflow-wrap: anywhere：只在/、-、.、_等语义分隔符后断，适合 API 路径（如/v1/users/abc123def456），Chrome 86+、Safari 15.4+、Firefox 97+ 支持；老版本需 fallback 到break-word
别混用——word-break: break-all 会覆盖 overflow-wrap 的逻辑。
移动端和 Safari 的真实兼容底线
iOS Safari 在 15.4 之前对 overflow-wrap 支持不稳定，旧版常静默回退到 normal；Android WebView 则依赖系统 WebKit 版本，碎片化严重。因此：
- 安全兜底仍建议加一行：
word-break: break-word（虽已废弃，但 Safari ≤14 必须靠它） - 不要指望
hyphens: auto救急——它对无空格英文串完全无效，iOS 需lang="en"才可能触发，且不支持数字字母混合串 - 如果用了
contenteditable或<textarea></textarea>，break-all在 iOS 上支持更差，必要时补-webkit-hyphens: auto
最易被忽略的是 min-width: 0 —— Flex/Grid 容器里漏掉它，其他全写对也白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
