需在容器宽度不足且存在语义分隔点时才生效，必须配合max-width、white-space:normal和overflow-wrap:break-word等css，避免word-break:break-all；应插在url、驼峰命名、邮箱等天然断点处，禁插单词或数字中间。
为什么加了 <wbr></wbr> 却没换行
不是标签写错了，而是浏览器根本没触发“需要换行”的判断。它只在容器宽度不足、且当前行后续内容无法完整放入时，才考虑你标记的位置。<wbr></wbr> 在宽屏下完全隐形，不报错也不提示。常见压制条件包括：
父元素设置了 white-space: nowrap（比如按钮、导航项、<code> 默认样式）
容器没设 max-width 或明确宽度约束
用了 word-break: break-all —— 浏览器会直接绕过所有 <wbr></wbr>，暴力切字
文本被包裹在 <pre class="brush:php;toolbar:false;"></pre> 或 display: inline-block 且未触发行内布局逻辑
<wbr></wbr> 该插在哪些位置才有效
插错等于白加。浏览器只对天然有语义分隔感的位置响应，不是任意字符间都能断。
✅ 推荐位置：https://<wbr>api.<wbr>example.<wbr>com/<wbr>v2/<wbr>users</wbr></wbr></wbr></wbr></wbr>、fetchUserData<wbr>FromAPI<wbr>V2</wbr></wbr>、admin@<wbr>very-long-domain.<wbr>io</wbr></wbr>
❌ 无效位置：hel<wbr>lo</wbr>（普通英文单词中间）、123<wbr>456</wbr>（纯数字串）、<p><wbr>文本</wbr></p>（块级开头，不绑定后续文本）
⚠️ 密度控制：一个长 URL 插 3–5 个 <wbr></wbr> 足够；过多可能在宽屏下引入不可见断点风险
必须搭配的 CSS 才能让 <wbr></wbr> 生效
<wbr></wbr> 本身不触发换行，全靠父容器排版策略支持。
必须设置宽度约束：max-width: 375px 或 width: 100%; max-width: 100%
显式声明换行许可：white-space: normal（默认值，但显式写更安全）
推荐启用 fallback 策略：overflow-wrap: break-word —— 它会优先尝试 <wbr></wbr> 标记点，不行再退到其他位置
绝对避免：word-break: break-all（破坏 URL 可点击性）、word-break: keep-all（尤其在中日韩上下文中会彻底压制）
特别注意：<code> 元素默认是 white-space: nowrap，需额外加 style="white-space: normal"
动态场景下怎么避免手动插 <wbr></wbr>
手写不现实，尤其在响应式或服务端渲染场景。
前端可用正则自动注入，例如匹配 URL 中的逻辑分隔符：/([\/._?&=#@])(?=\w)/g，替换为 $1<wbr></wbr>
服务端模板可封装过滤器，如 Nunjucks 的 {{ path | wbr }}，Django 的 {{ url|safe }} 配合自定义 filter
动态插入时注意转义：避免把 <wbr></wbr> 当普通字符串输出（如被 escape 模板过滤器吃掉）
别用零宽空格（）或 替代 —— 前者复制粘贴带不可见字符，后者显示连字符且影响屏幕阅读器
