单靠 word-break 或 hyphens 无法稳定防止长单词溢出，必须配合 max-width + overflow-wrap: anywhere；后者是当前最可靠方案，chrome 107+、firefox 109+、safari 16.4+ 已稳定支持。
直接结论：单靠 word-break 或 hyphens 都不能稳住长单词溢出，必须配合 max-width（或 width）+ overflow-wrap 主力控制；hyphens: auto 仅对英文等有断字规则的语言生效，且必须带 lang 属性，否则静默失效。
overflow-wrap: anywhere 是当前最可靠的核心方案
它在容器空间不足时立刻断行，不等空格、不查字典、不依赖连字符，但也不会无差别切字母——比如 https://example.com/very-long-path 在 240px 宽度下会自然断成两行，且不会把 example 拆成 ex-ample。
- 比
overflow-wrap: break-word更激进：后者先尝试空格/标点换行，失败才硬切，窄屏下仍可能溢出 - 比
word-break: break-all更可控：前者只干预“撑破”的长串，不影响正常单词和中文换行逻辑 - 必须设
max-width，否则浏览器认为“还有空间”，根本不会触发断行 - Chrome 107+、Firefox 109+、Safari 16.4+ 均已稳定支持；若需兼容 Safari 15.4 以下，可加
word-break: break-word降级（注意：这不是标准值，但实测有效）
hyphens: auto 只在特定条件下起作用
它不是“自动美化换行”的万能开关，而是调用浏览器内置的断字字典。没有语言声明、没有对应语言支持，就等于没写。
- 必须配合
lang="en"（或其它支持语言），写在标签或具体元素上，漏掉就白配 - Chrome/Firefox 对英文、德语等支持较好；Safari 对
hyphens支持极弱，基本不生效 - 对中文、日文、韩文完全无效——这些语言没有标准断字点，浏览器不提供字典
- 对
<code>、font-family: monospace内容也基本无效，字体本身不携带断字信息
word-break: break-all 的真实适用场景很窄
它适合你明确知道内容无需语义完整、且用户不会逐字阅读的地方，比如后台日志、调试面板、表格里的 token 字段。
- 会在任意位置断，包括
APIKey→APIK-ey、JavaScript→Java-Script，语义全毁 - 在
flex或grid子项中常失效，因为默认min-width: auto锁死了压缩，需额外加min-width: 0或overflow: hidden - 与
hyphens互斥，两者同时写，hyphens直接被忽略 -
word-break: break-word已废弃，现代浏览器直接忽略，别再从老项目里复制粘贴
中英混排 + 数字混合内容怎么处理
这是最麻烦的真实场景：一段文字里夹着中文、英文单词、user_id_1234567890、https://...，还可能嵌套 <code> 标签。
- 优先组合：
overflow-wrap: anywhere+word-break: keep-all（中文不被劈开，英文按anywhere规则处理） - iOS 12 以下对
keep-all支持差，补-webkit-word-break: keep-all - 对纯代码片段（如
const myVariableName = 123），加white-space: pre-wrap保留缩进，再叠overflow-wrap - 别给
<code>加hyphens或break-all，它本就不该换行；真要限制宽度，用overflow-x: auto滚动更安全
真正容易被忽略的是：所有断行属性都依赖容器有明确宽度约束，而这个约束在 Flex/Grid 中常被 min-width: auto 抵消；另外，服务端渲染若漏了 lang，前端再怎么写 hyphens 都是摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
