overflow-wrap: break-word是解决超长连续字符溢出的首选方案，必须配合width/max-width、white-space: normal及min-width: 0（flex/grid子项）才生效；word-break: break-word早已被移除，无效。
overflow-wrap: break-word 是解决超长连续字符溢出的首选，不是“可选”，而是当前唯一兼顾语义安全与浏览器兼容性的方案。
为什么 word-break: break-word 一定不能写
它早在 Chrome 20+ 就被移除，Firefox 和 Safari 也从未实现。写了等于白写，DevTools 的 computed styles 里根本不会出现该声明。很多老项目还留着这行，结果就是容器明明设了 width: 200px，https://example.com/very/long/path 还是直接撑破——问题不在 HTML，而在 CSS 写错了。
真正该用的是：
-
overflow-wrap: break-word（现代标准，推荐） -
word-wrap: break-word（IE9+ 兼容写法，语义模糊但有效）
wbr 标签该插在哪儿、不该插在哪儿
wbr 不是换行符，它是“断点建议”。浏览器只在容器宽度不足、且该位置语义合理时才采纳。插错地方，等于没插。
应该插的位置（天然语义断点）：
- 路径斜杠
/后：/api/v2/<wbr>users/<wbr>1234567890</wbr></wbr>（不是/api/<wbr>v2/users</wbr>） - 域名点号
.后：https://<wbr>api.example.<wbr>com</wbr></wbr> - 查询参数符号后：
?q=<wbr>hello&sort=<wbr>id</wbr></wbr> - 驼峰大写字母前：
fetch<wbr>Data<wbr>From<wbr>API</wbr></wbr></wbr>
不该插的位置：
- 纯数字串中间（如
1234567890）：无语义，也不提升可读性 -
<pre class="brush:php;toolbar:false;"></pre>或<textarea></textarea>内：预格式化元素默认禁用自动换行，wbr无效 - 中文段落或普通英文句子：浏览器已有空格/标点断点，加了反而增加维护负担
Flex/Grid 布局下文字死活不换行？先查 min-width
90% 的“写了 overflow-wrap: break-word 却不生效”问题，根源在 Flex 子项的 min-width: auto。它会锁住最小内容宽度，让换行逻辑完全失效。
修复方式很简单，只加一行：
- 给文本容器加
min-width: 0（不是父容器） - 或者加
overflow: hidden（副作用是藏溢出，非治本）
别同时设 white-space: nowrap——它会直接覆盖所有换行行为。
中英混排场景必须配 word-break: keep-all
中文本身按字换行，但夹着英文长串（如 测试test123456789）时，overflow-wrap: break-word 单独用压不住英文部分。它可能整段溢出，或错误切开中文。
正确组合是：
-
overflow-wrap: break-word处理长单词 -
word-break: keep-all锁定中文不被切，同时把英文交由overflow-wrap控制
这个组合在移动端和窄屏下尤其关键，否则用户看到的可能是“测
试test123456789”这种断裂效果。
最易被忽略的一点：所有换行控制都依赖宽度约束。没有 width、max-width 或弹性布局下的尺寸限制，浏览器压根不触发“需要换行”的判断——wbr 不生效，overflow-wrap 也不起作用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
