overflow-wrap: anywhere比break-word更值得优先用，因其在容器放不下时立即断行，不依赖空格或连字符，也不无差别切词，实测能自然断开verylongemailaddress@example.com而不拆分example；break-word则行为保守，先试自然断点再硬切，窄屏易溢出。
overflow-wrap: anywhere 为什么比 break-word 更值得优先用
它在“容器放不下时立刻断”，不等空格或连字符，也不像 word-break: break-all 那样无差别切——保留了正常换行逻辑，只对真正撑破的长串出手。实测中，verylongemailaddress@example.com 在 240px 宽卡片里能自然断成两行，且不会把 example 拆成 ex-ample。
overflow-wrap: break-word 是兼容兜底方案，但行为保守：先试空格/连字符，失败才硬切，容易在窄屏下仍溢出。
-
overflow-wrap: anywhere在 Chrome 107+、Firefox 109+、Safari 16.4+ 已稳定支持 - 若需兼容 Safari 15.4 以下，可加
word-break: break-word降级（注意：这不是标准值，但实测有效） - 两者都依赖
width或max-width，否则浏览器认为“还有空间”，根本不会触发断行
Flex 容器里 overflow-wrap 失效的真正原因
不是属性写错了，是 Flex 子项默认的 min-width: auto 在“抗压”——它会阻止子元素被压缩换行，哪怕你写了 overflow-wrap: break-word。
给子元素加 min-width: 0 是最常见解法（flex: 1 有时隐含该行为，但不保险）。
- 如果父容器是
display: flex且没设flex-wrap: wrap，子项会被强行拉宽，overflow-wrap彻底失去作用点 - 移动端 iOS Safari 12 以下对
min-width: fit-content+overflow-wrap组合支持极差，建议一律显式写min-width: 0 -
overflow-wrap只对「无自然断点的连续字符串」起效，比如https://example.com/v1/very/long/path/with/no/spaces；一旦有空格或标点，它就静默让位给默认换行
hyphens: auto 为什么经常“静默失效”
它不是开关，而是请求浏览器“按语言规则加连字符”，但这个请求是否被响应，取决于三个硬条件。
- 必须有
lang="en"（或lang="de"等明确支持断字的语言）属性，写在父元素或自身上；服务端渲染漏掉lang，CSS 再怎么写都没用 - Chrome/Safari 对英文支持尚可，Firefox 支持更广；但中日韩基本不生效——没有标准断字点，浏览器干脆跳过
- 即使满足所有条件，它也只在“有足够空间加连字符”的时候才加，不会强制断；所以必须和
overflow-wrap: anywhere配合，作为增强项而非主力 - 对
<code>标签、font-family: monospace或自定义字体几乎无效，因为这些字体不提供断字信息
中英文混排时的隐藏陷阱
中文本身按字可断，浏览器认为“有地方可断”，于是跳过 overflow-wrap 的兜底逻辑，导致夹在中文里的英文长串（如 test123456789）依然溢出。
解决方案是组合：word-break: keep-all（禁中文内断） + overflow-wrap: break-word（保英文长串不断行）。
- iOS 12 以下不支持
keep-all，需补word-break: break-word回退 - 别混用
overflow-wrap: anywhere和word-break: break-all——后者会完全接管断行逻辑，前者失效 - 对外部不可控内容（如用户粘贴的 URL、API 返回的路径），用
overflow-wrap: break-word更稳妥
真正稳住长单词溢出的最小必要组合是：明确的 max-width + overflow-wrap: anywhere + min-width: 0（Flex 场景下）。少一个，就可能在某个设备或数据输入下突然破环。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
