overflow-wrap: break-word在手机上常失效，因其仅在有自然断点（如空格、标点）时触发，而移动端常见无空格长串（如URL、数字串）缺乏UBA word boundary；加之iOS Safari 15.4前支持弱、Android WebView碎片化，且必须配合max-width和white-space: normal等约束才生效。
overflow-wrap: break-word 为什么在手机上经常不生效
它只在「有自然断点」时才起作用，比如空格、标点、中英文交界处；但移动端常见的是 https://example.com/verylongpath、12345678901234567890 这类无空格长串，浏览器找不到 UBA word boundary，就直接放弃换行。
iOS Safari 对 overflow-wrap 的稳定支持从 iOS 15.4 才开始，旧版会静默回退到 normal；Android WebView 则依赖系统 WebKit 版本，碎片化严重，尤其在国产定制 ROM 上容易失效。
最关键一点：overflow-wrap: break-word 必须配合 max-width 或固定宽度容器才触发——没有宽度限制，浏览器压根没换行动机。
真正可靠的移动端换行组合写法
别只写一个属性。按场景选以下三组之一，全部需设置 max-width：
立即学习“前端免费学习笔记（深入）”；
-
white-space: normal; word-break: break-all;—— 最暴力也最稳，适合日志 ID、API 路径、哈希值等纯数据展示，中英文都可断在任意字符间 -
white-space: normal; overflow-wrap: break-word; word-break: normal;—— 更温和，优先保单词完整，只在必要时进单词内断；适合消息气泡、用户可见正文 -
white-space: pre-wrap; overflow-wrap: break-word;—— 保留原始换行符和空格，同时允许溢出时断词；适合富文本渲染、代码说明等场景
flex 容器里 word-break: break-all 失效的修复方法
常见现象：div 套在 display: flex 父容器里，写了 word-break: break-all 却完全不换行。
原因：flex 子项默认带 min-width: auto，锁死了压缩行为，即使内容溢出也不让缩。
修复方式（任选其一）：
- 给子项加
min-width: 0 - 给子项加
overflow: hidden - 改用
width: 0; min-width: 0; flex: 1;强制弹性收缩
注意：word-break: break-word 已废弃，写了等于没写；word-wrap: break-word 是别名，兼容性略好但语义模糊，新项目统一用 overflow-wrap。
中英混排或纯中文场景下的隐藏坑
中文本身会在字之间换行，但一旦夹着英文长串（如 测试test123456789），英文部分可能整体溢出——这时单靠 overflow-wrap: break-word 依然无效。
必须补上 word-break: keep-all，防止中文被意外切开，同时让英文按需断；可加 -webkit-word-break: keep-all 兜底旧版 Safari。
如果容器内还有代码片段（如 const myVariableName = 123），建议额外加 white-space: pre-wrap 保留缩进和原始换行。
对支持较新的环境（Chrome 82+ / Safari 14.1+），overflow-wrap: anywhere 比 break-word 更智能：它会让元素最小内容宽度缩到单个字符宽，而 break-word 不会——这点在 min-content 场景下特别关键，但容易被忽略。
