<wbr>不是换行指令，仅在容器宽度不足、浏览器不得不折行且存在合理断点时才生效；需配合max-width、white-space: normal和overflow-wrap: break-word，插在URL斜杠后、驼峰大写字母前等语义分隔处才有效。
<wbr> 不是换行指令，它只在容器宽度不足、浏览器“不得不折行”时才考虑你标记的位置——加了不等于断了，静默失效才是常态。
为什么加了 <wbr> 却完全不换行
根本不是标签写错了，而是触发条件没满足。浏览器只在「当前行已满 + 后续文本放不下 + 有合理断点」三者同时成立时才启用它。
- 父容器没设
max-width或固定宽度（比如width: 100%但外层没约束），浏览器压根不判断“要不要折” - 父元素用了
white-space: nowrap（常见于<button>、<nav>、<code>），直接封死所有换行机会 - 内容本身太短，或 viewport 太宽，根本没到溢出临界点——用开发者工具临时缩小屏幕宽度验证
- 误用了
<wbr/>：HTML5 中它是自闭合标签，但必须写成<wbr>，/>写法部分解析器会忽略
<wbr> 应该插在哪些位置才真正起作用
插错地方等于白加。浏览器只对天然有逻辑分隔感的位置响应，不是任意字符间都能断。
- ✅ 有效位置：
https://<wbr>api.<wbr>example.<wbr>com/<wbr>v2/<wbr>users、fetchUserData<wbr>FromAPI<wbr>V2、admin@<wbr>very-long-domain.<wbr>io - ❌ 无效位置：
hel<wbr>lo（普通英文单词中间）、123<wbr>456（纯数字串）、<p><wbr>文本</p>（<wbr>前无绑定文本） - 数字与字母交界处优先：如
v2<wbr>beta、id123456789<wbr>abc - 驼峰命名的大写字母前：如
XML<wbr>Http<wbr>Request，不是XMLH<wbr>ttp<wbr>Request
和 word-break: break-all、overflow-wrap: break-word 混用时的冲突
这三者机制完全不同：<wbr> 是语义提示，后两者是 CSS 强制策略。混用时 CSS 规则可能直接绕过 <wbr>。
立即学习“前端免费学习笔记（深入）”；
-
overflow-wrap: break-word配合<wbr>是推荐搭配，会优先在标记处折行 - 务必禁用
word-break: break-all，它会锁死所有断点，把https://api.example.com切成https://api.exa…，链接失效 -
word-break: keep-all在中日韩排版中常见，但它会压制<wbr>的换行机会，需谨慎使用
服务端或前端自动化插入 <wbr> 的安全边界
手动为每个长字符串加 <wbr> 不现实，但自动化必须守住底线：不能在未转义的 HTML 上直接拼接。
- 若含
<script>或未闭合标签，等于执行 XSS 的元素，仅对 URL、邮箱、驼峰词等明确模式匹配后插入 - 服务端模板（如 Nunjucks）应封装过滤器，例如
{{ path | wbr }}，内部完成转义 + 插入，不暴露原始字符串 - Safari（尤其 iOS 16 之前）在
monospace字体或未设overflow-wrap的容器中支持不稳定，需额外验证
最常被忽略的一点：它依赖浏览器渲染引擎的断词逻辑，而 Safari 在某些 inline 元素内对 <wbr> 的支持仍偶有不一致；插得太多反而增加解析负担，一个长 URL 插 3–5 个就足够。
