overflow-wrap: break-word 是首选，仅在长单词真正溢出时断词，保全 url、api 路径等可读性；word-break: break-all 无条件切字，仅适用于哈希值等纯技术字符串，且会覆盖 overflow-wrap。
overflow-wrap: break-word 是最稳妥的选择，它只在长单词真正溢出容器时才断行，不破坏可读性；word-break: break-all 会无条件切字，慎用。
为什么 overflow-wrap: break-word 应该是首选
它不是“一上来就切”，而是等浏览器确认整个单词放不下时，才在内部找位置断开。对 URL、API 路径、Base64 字符串这类无空格长串效果好，且不会把 fetchData 拆成
fet<br>chDa<br>ta这种难读形式。
- 必须配合明确宽度（如
max-width: 300px或width: 100%且父容器有约束） - 不能和
white-space: nowrap共存——常见于<button></button>或框架默认样式，需显式重置为normal - 旧版浏览器兼容写法：同时声明
overflow-wrap: break-word和word-wrap: break-word
word-break: break-all 什么情况下才该用
它不管单词是否溢出，只要容器宽度不够，就从左到右挨个字符切。适合纯技术场景，比如日志 ID、哈希值、连续数字串（如 12345678901234567890），但绝对不适合普通英文文本。
- 中文/日文排版中可放宽使用，因本身无词边界
- 和
wbr标签互斥：一旦启用break-all，所有<wbr></wbr>都被忽略 - 移动端窄屏下易造成单字换行，视觉碎片化，建议加
min-width: 0防止 flex 子项撑宽
<wbr></wbr> 标签不是“加了就断”，而是“断了才起作用”
它不驱动换行，只提供语义断点建议。浏览器只在三个条件同时满足时才采纳：容器宽度不足 + 当前行已满 + 后续内容无其他自然断点。
- 必须插在逻辑边界：URL 的
/、.、@后；驼峰名大写字母前（fetch<wbr>Data</wbr>，不是fe<wbr>tch</wbr>）；数字字母交界处（v2<wbr>beta</wbr>） - 父容器 CSS 缺一不可：
max-width（或明确 width）、white-space: normal、overflow-wrap: break-word - 误写成
<wbr></wbr>在部分解析器中失效，HTML5 规范要求写成<wbr></wbr>
真正容易被忽略的，是容器上下文的隐式样式覆盖——比如一个 <td> 默认 <code>white-space: nowrap，或某个 UI 组件库给 <span></span> 加了 display: inline-block 却没设 max-width，这时候无论你写多少 <wbr></wbr> 或 overflow-wrap 都不会生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
