overflow-wrap: break-word 对纯数字/URL无效，需用 white-space: normal + word-break: break-all；flex/grid 中须加 min-width: 0；overflow-wrap: anywhere 更智能但需兼容性兜底。
overflow-wrap: break-word 单独用在纯数字/URL上基本无效
它只在有自然断点（空格、标点、CJK字边界）时才触发换行。像 12345678901234567890 或 https://example.com/a_very_long_path_without_spaces 这类内容，浏览器根本找不到 UBA word boundary，overflow-wrap: break-word 就会静默放弃——写了等于没写。
更麻烦的是，iOS Safari 在 15.4 之前对这个属性支持极弱，Android WebView 则高度依赖系统 WebKit 版本，移动端尤其不可靠。
真正能生效的组合：white-space: normal + word-break: break-all
这是目前兼容性最广、行为最确定的写法，适用于所有现代浏览器（包括 iOS 12+、Android 5+ WebView）：
-
white-space: normal确保空白处理回归默认，激活换行逻辑 -
word-break: break-all强制在任意字符间断开，不管是不是单词 - 必须配合
width或max-width，否则没有换行动机
示例：
立即学习“前端免费学习笔记（深入）”；
.text-box {
max-width: 240px;
white-space: normal;
word-break: break-all;
}
flex/grid 容器里 word-break: break-all 失效？检查 min-width
在 display: flex 或 display: grid 的父容器中，子项默认带 min-width: auto，会锁死压缩行为——哪怕写了 word-break: break-all，浏览器也宁愿撑宽也不换行。
修复方法很简单：
- 给子元素加
min-width: 0（推荐） - 或加
overflow: hidden（副作用是可能裁剪 border/padding）
别用 word-break: keep-all，它对纯英文/数字完全无效；也别信 word-wrap: break-word，这个属性已废弃，CSS 规范里早就没了。
想更“温和”一点？试试 overflow-wrap: anywhere
它和 break-word 表面效果类似，但底层更聪明：在弹性布局中，能让容器最小宽度缩到单个字符宽，而不是被最长单词卡死。适合卡片标题、响应式表格列这类需要自适应收缩的场景。
注意兼容性：
- Chrome 82+、Firefox 68+、Safari 14.1+ 支持良好
- iOS 14.5+ 才稳定，旧版 iOS 需降级 fallback
- 必须搭配
white-space: normal和明确宽度
复杂点在于：它不能单独扛起全部责任，遇到纯数字仍建议加 word-break: break-all 做兜底——浏览器对 anywhere 的实现细节仍有差异，别指望一次写完就彻底省心。
