overflow-wrap: break-word单独无效，必须配合width/max-width、white-space: normal及min-width: 0（flex/grid子项）才能生效，因其仅在容器有明确宽度且允许换行时触发断词。
只写 overflow-wrap: break-word 或 word-break: break-all 几乎一定不生效，必须配合宽度约束、white-space 值和容器行为才能起作用。
为什么 overflow-wrap: break-word 单独写没用
它不是“开启换行”的开关，而是告诉浏览器：“当一个不可分割的长串（比如 https://example.com/very-long-path 或 supercalifragilisticexpialidocious）放不进当前行时，才允许在词内切开”。但前提是：浏览器得知道“当前行有多宽”。
- 容器没设
width或max-width，或被父级flex/grid拉伸到无限宽 →overflow-wrap失去判断依据 - 元素继承了
white-space: nowrap（常见于按钮、标题类组件）→ 直接压制所有换行行为 - 内容在
<pre class="brush:php;toolbar:false;"></pre>里，默认white-space: pre→overflow-wrap不触发 - 某些 CMS 输出含零宽空格（
）或窄空格（
word-break: break-all 什么时候该用、什么时候不该用
它无视语义，在任意字符间切断，对中日韩文本天然友好，也适合纯技术字符串；但对英文正文极易破坏可读性。
- 适合场景：
<pre class="brush:php;toolbar:false;"></pre>内展示 base64、哈希值、无分隔符文件名（如sha256_abcdef1234567890...） - 适合场景：表格单元格固定宽度 + 中英文混排日志 ID（如
user-1234567890-en-us） - 慎用场景：普通段落、新闻正文、用户评论 ——
JavaScript可能变成JavaScrip-t，userProfileData可能断成userPro-fileData - 别和
white-space: nowrap同时用，否则行为冲突；也别和overflow-wrap: break-word共存，word-break优先级更高，后者会被忽略
Flex/Grid 容器里文字死活不换行的解法
Flex 子项默认 min-width: auto，会“保护”内容不被压缩。哪怕你写了 overflow-wrap: break-word，浏览器也优先撑开容器而不是换行。
- 给子元素加
min-width: 0（或更现代的min-inline-size: 0），解除最小宽度保护 - 必须同时设
white-space: normal（不能是nowrap或pre） - 显式声明
max-width: 100%，而非仅靠父容器约束 - 避免写
flex: 0 0 auto或flex: none—— 它们等价于min-width: auto，等于白配
移动端和旧浏览器的兼容要点
iOS Safari 11.3 及更早版本不认 overflow-wrap，Android WebView 基本无坑，IE11 只支持 word-wrap。
- 必须双写：
overflow-wrap: break-word; word-wrap: break-word; - Safari 旧版对
flex + min-width: fit-content组合支持极差，测试时可用开发者菜单临时禁用 Flex 布局验证 - 在英文文本中，可加
-webkit-hyphens: auto; hyphens: auto;改善断行位置，但需配合lang="en" - 别依赖
anywhere—— 它太激进（连hello都可能切为hel-lo），且 Safari/Chrome 实现不一致，仅适合代码编辑器内联提示类场景
最容易被忽略的是：漏掉 overflow: hidden。即使断了行，若容器本身没设 overflow，子元素仍可能因子项撑开而破坏布局，尤其在 flex 或绝对定位上下文中。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
