iOS 上 word-break: break-all 失效因 Safari 渲染兼容性限制，中文等无空格文本中常被忽略；可靠方案是 overflow-wrap: break-word、word-break: break-word 与 white-space: normal 三属性协同。
word-break: break-all 为什么在 iOS 上失效
因为 Safari（尤其是旧版 iOS）对 word-break 的支持不完整，break-all 在中文、日文等无空格文本中可能被忽略，导致容器溢出或横向滚动。这不是你写错了，是渲染引擎的兼容性限制。
- 仅当文本含英文/数字混合且中间有连字符或点号时，
break-all才较可靠 - iOS 15+ 开始支持更稳定的
overflow-wrap: break-word，但需配合word-break: normal - 避免单独依赖
word-break: break-all做移动端断行兜底
移动端长文本换行的可靠组合写法
真正起效的是三属性协同：强制软换行 + 允许单词内断 + 禁用非必要断点。单靠一个属性容易漏掉边界情况。
-
overflow-wrap: break-word—— 允许长单词内部换行（如超长 URL） -
word-break: break-word（注意：这是已废弃但 Safari 仍识别的值，比break-all更稳妥） -
white-space: normal—— 确保不被nowrap类样式意外覆盖
示例：
.text-box {
overflow-wrap: break-word;
word-break: break-word;
white-space: normal;
}
flex 容器里文字不换行的隐藏原因
很多“文字溢出”实际不是 CSS 断行问题，而是父级 display: flex 默认启用 min-width: auto，强行撑开容器宽度。这时候加 word-break 没用。
立即学习“前端免费学习笔记（深入）”；
- 必须给 flex 子项加
min-width: 0或overflow: hidden来释放收缩能力 - 如果子项是
div包裹文字，还需确认它没被设成display: inline或inline-block - Vue/React 组件中，自定义标签可能隐式带
display: inline，建议显式设为display: block
中英文混排时 word-break: keep-all 的副作用
这个值本意是“不让中文断开”，但会连带禁用英文单词内的换行（比如 superlongidentifier），反而更容易溢出。它只适合纯中文标题场景，不适合正文。
- 移动端正文一律避免
keep-all，尤其含代码片段、邮箱、URL 的内容 - 若需保护某些词不断开（如品牌名
iPhone），用<span style="white-space: nowrap">iPhone</span> - 测试时务必用真实设备看 iOS Safari 和 Chrome Android 表现差异，模拟器常不准
最麻烦的不是写不对，是写了之后在开发机上看正常，上线后用户一缩放字体就溢出——记得在真机上用系统级字体放大设置验证。
