仅靠white-space:normal对无空格长串无效，必须组合overflow-wrap:break-word与word-break:break-all，并确保容器有明确宽度及flex-wrap:wrap（若为flex布局）。
移动端强制换行不是加个 white-space: normal 就完事——它默认就生效，但对无空格长串（比如一串数字、base64、URL）完全无效。真正起作用的是 word-break 和 overflow-wrap 的组合，且必须配合容器有明确宽度约束。
为什么 word-break: break-all 在 iOS 上有时不生效？
因为 Safari 对 word-break: break-all 的支持不稳定，尤其在 Flex 容器或设置了 display: inline-block 的子元素里容易失效。它更倾向依赖 overflow-wrap: break-word（即旧名 word-wrap: break-word）来处理长单词。
- 必须同时声明
overflow-wrap: break-word和word-wrap: break-word，确保 iOS 和 Android WebView 兼容 - 如果父容器是
display: flex，记得加flex-wrap: wrap，否则子项即使内容超长也不会折行——flex-wrap是 Flex 换行的唯一开关 - 避免给子元素设
white-space: nowrap或min-width: fit-content，这两者会直接锁死换行能力
overflow-wrap 和 word-break 到底该选哪个？
看你要“保词义”还是“保布局”：overflow-wrap: break-word 会把整个长单词挪到下一行（不截断），适合展示用户 ID、token 等需完整识别的字符串；word-break: break-all 会在任意字符位置断开（比如把 abcdefgh 拆成 abc + defgh），适合日志、代码片段等无需语义连贯的场景。
- 中文/日文/韩文文本慎用
word-break: break-all，它可能把一个汉字硬拆成两半（虽然实际渲染不会真切开，但排版逻辑会错乱） - 若需兼容 IE11，必须保留
word-wrap: break-word，因为overflow-wrap在 IE 中不被识别 - 现代项目推荐优先写
overflow-wrap: break-word，再 fallbackword-wrap: break-word，最后按需加word-break: break-all做兜底
Flex 布局里子元素死活不换行，怎么查？
不是样式没写对，而是 Flex 容器默认 flex-wrap: nowrap，哪怕内容撑爆屏幕也绝不折行——这是规范行为，不是 bug。
立即学习“前端免费学习笔记（深入）”；
- 第一步：确认父容器是否写了
flex-wrap: wrap（或wrap-reverse） - 第二步：检查父容器是否有明确宽度（
width、max-width或受 viewport 限制），否则 Flex 会自动撑开，根本没“空间不足”这回事 - 第三步：子元素别设
flex: 0 0 auto或white-space: nowrap，它们会阻止内容参与换行计算 - 第四步：用
gap替代margin控制间距，margin在换行后容易导致末行不对齐
最常被忽略的点：移动端 viewport 缩放、字体放大、系统辅助功能（如“更大文字”开关）都会改变行高和容器可用宽度，单纯靠 CSS 属性无法覆盖所有情况——得结合 max-width: 100%、box-sizing: border-box 和必要时的 JS 测量做兜底。
