overflow-wrap: break-word 是首选，但必须配 max-width 或 width 才生效；它优先自然换行，仅在必要时断词，语义安全，适合 URL 等技术文本，却依赖宽度约束和 white-space: normal 等前提条件。
overflow-wrap: break-word 是首选，但必须配宽度才生效
它不是强制断行，而是“兜底换行”：先尝试在空格、标点、CJK字边界处自然换行；实在放不下时，才在长单词内部断开。语义安全，适合 URL、API 路径、哈希值这类内容。
但它有个硬前提：overflow-wrap: break-word 本身不触发换行动机——必须配合 max-width 或 width（比如 max-width: 300px）才起作用。没宽度限制，浏览器认为“能塞下”，写了也白写。
它也不决定“在哪断”，只开放断行权限；真正控制断点的是 word-break 或浏览器默认策略。所以常见组合是：
overflow-wrap: break-word-
word-break: keep-all（防中文被劈开，同时让英文按需断） - 移动端 iOS 12 以下对
keep-all支持弱，可加-webkit-word-break: keep-all兜底
word-break: break-all 在 flex/grid 里常失效，别盲目套用
它确实能无差别切割任意字符，但有两个硬性前提：父容器必须是块级元素 + 有明确宽度。在 display: flex 或 display: grid 容器中，子项默认带 min-width: auto，会锁死压缩行为——写了 word-break: break-all 也完全没反应。
立即学习“前端免费学习笔记（深入）”；
典型错误现象：div 里放了超长 URL，加了 word-break: break-all 却依然溢出 → 先检查是否嵌套在 flex 容器里，再看子项有没有被 min-width: auto 锁死。
修复方法（任选其一）：
- 给子项加
min-width: 0 - 或加
overflow: hidden（副作用小，推荐） - 避免用于
table-cell，Safari 旧版本支持不一致
overflow-wrap: anywhere 更适合弹性布局，但兼容性要查
它和 break-word 表面效果类似，但底层逻辑不同：当容器宽度设为 min-content（比如 inline-size: min-content 或 flex 子项自动收缩）时，anywhere 会让元素的最小内容宽度缩到单个字符宽，而 break-word 仍按最长单词算宽度。这意味着在卡片标题含长 URL、grid 某列需自适应收缩等场景下，anywhere 更容易“挤进去”。
但它不是万能药：
- Firefox 目前不支持
- Safari 15.4+ 才开始支持，Chrome 87+ 支持完整
- 不要指望它在固定宽容器里比
break-word更“智能”——两者表现完全一致 - 生产环境用之前务必查 caniuse
white-space: pre-wrap 是代码类文本的隐藏搭档
如果容器里混着代码片段（如 const myVariableName = 123），光靠 overflow-wrap 不够：它不管缩进和原始换行。这时得加 white-space: pre-wrap，既能保留空格/缩进/换行符，又允许长单词在必要时断行。
注意别误用 white-space: nowrap 或 pre ——前者彻底禁换行，后者虽保留格式但拒绝任何自动断行，长 URL 会直接撑爆容器。
容易被忽略的一点：所有这些属性都依赖渲染上下文。比如 word-break: keep-all 对纯英文无效，对中英混排才起作用；overflow-wrap: break-word 在 table-cell 里也要小心 Safari 的老 bug。实际项目里，建议先定容器宽度模型，再选断行策略，而不是反过来堆属性。
