overflow-wrap: break-word 需配合 max-width 才生效，否则因无宽度边界不触发断词；慎用 word-break: break-all，避免错误切分单词；overflow-wrap: anywhere 更适合带分隔符的长字符串，老版本 Safari 需 fallback 到 word-break: break-word。
直接用 overflow-wrap: break-word 配合明确的 max-width，90% 场景就能稳住；别一上来就写 word-break: break-all，它真能防溢出，但会把 JavaScript 切成 JavaS-crip-t，用户复制粘贴全乱。
为什么 overflow-wrap: break-word 不生效
不是属性写错了，是浏览器根本没触发断词逻辑——它需要一个“装不下”的参照：
- 父容器没设
max-width或width（比如 flex 子项、绝对定位元素默认不受控） - 被
white-space: nowrap类（如 Tailwind 的whitespace-nowrap）直接压制 - 继承了
word-break: keep-all，它会优先于overflow-wrap - 在旧版 Safari（≤14）里，
overflow-wrap被忽略，得补word-break: break-word（注意：这不是标准值，但实测最稳）
overflow-wrap: anywhere 适合什么场景
它比 break-word 更主动，但有节制：允许在 /、-、.、_ 后断行，不会在 https 中间切开。专治这类内容：
- API 路径：
/v1/users/abc123def456789 - 文件名：
config.production.min.js - 带分隔符的 token：
sha256-8a3b4cf9e0...
Chrome 86+、Safari 15.4+、Firefox 97+ 支持；老版本 fallback 到 break-word 即可。Tailwind 用户需确认启用了 overflow-wrap-anywhere 功能（v3.3+）。
立即学习“前端免费学习笔记（深入）”；
千万别混用 hyphens: auto 和 word-break: break-all
它们互斥：break-all 一旦存在，hyphens 就被浏览器静默忽略。而 hyphens: auto 在移动端本就靠不住：
- iOS Safari 要求同时满足：
lang="en"显式写在元素上、iOS 15.4+、系统字体、单词 ≥7 字符 - @font-face 引入的字体若没内嵌连字符表（U+2010 或 U+00AD），直接跳过
- 对
XPS139000FHDPLUS这类中英数字混排串完全无效
真要加连字符，只在纯英文段落里试，且必须显式声明 lang；否则，别把它当主力方案。
最常被忽略的一点：所有换行控制都依赖容器有明确宽度边界，max-width: 100% 是最低成本的兜底，但别指望它在 display: inline 元素上起效——得是 block 或 inline-block。
