不是强制换行开关，而是浏览器在容器宽度不足、其他换行策略失效时才考虑的语义断点提示；需同时满足容器有max-width、white-space: normal且无word-break: break-all等压制样式。
<wbr></wbr> 不是“让 URL 换行”的开关，而是告诉浏览器：“这里可以断，但你得自己判断要不要断”——它只在容器宽度不足、且其他换行策略（如空格、标点）都失效时才生效。直接加标签却出现横向滚动条，90% 是 CSS 或插入位置没配对。
为什么加了 <wbr></wbr> 还是横向溢出
根本不是标签写错了，而是浏览器压根没触发折行逻辑。它需要同时满足三个条件：容器有明确宽度限制（比如 max-width）、文本处于可换行上下文（white-space: normal）、且没有更高优先级的样式压制（如 word-break: break-all）。
- 父容器设了
white-space: nowrap→ 必须改成normal或显式移除 - URL 包在
<code>或<pre class="brush:php;toolbar:false;"></pre>里 → 默认禁用换行，需加white-space: normal和overflow-wrap: break-word - 用了
word-break: break-all→ 它会完全忽略<wbr></wbr>，二者互斥，不能共存 - 容器是
display: inline-block但没设width或max-width→ 浏览器认为“足够宽”，不启动折行判断
<wbr></wbr> 在 URL 中该插在哪几个位置
插错位置等于白插。浏览器只识别语义上合理的断点，不会在数字串中间、驼峰小写字母之间或协议头里硬断。
- ✅ 斜杠后：
https://api.example.com/v2/<wbr>users</wbr>（不是/v<wbr>2/users</wbr>） - ✅ 点号后：
example.<wbr>com</wbr>、admin@<wbr>very-long-company.<wbr>io</wbr></wbr> - ✅ 查询参数分隔符后：
?include=profile,<wbr>permissions</wbr>、&page=<wbr>2</wbr> - ✅ @ 符号后（比前更稳妥）：
contact@<wbr>company.<wbr>io</wbr></wbr> - ❌ 错误示例：
https://<wbr>exa<wbr>mple</wbr>.com</wbr>（exa和mple无语义分隔，浏览器大概率跳过）
必须配合的 CSS 才能生效
单靠 <wbr></wbr> 标签无法保证换行，它只是内容层提示，样式层必须兜底。
立即学习“前端免费学习笔记（深入）”；
- 容器必须设
max-width（如max-width: 100%或具体像素值），不能只靠父容器流式收缩 - 必须启用
overflow-wrap: break-word—— 否则 URL 被当做一个“不可分词”，<wbr></wbr>失去候选资格 - 确保
white-space: normal（默认值，但容易被继承覆盖） - 技术类文本建议加
hyphens: none，避免系统连字符干扰<wbr></wbr>的断点选择
动态注入比手动写更可靠
手写 <wbr></wbr> 易漏、难维护，尤其面对 API 响应中的动态 URL。前端可用正则批量处理，服务端模板也可封装过滤器。
- 推荐正则：
/([\/._?&=#@])(?=\w)/g，替换为$1<wbr></wbr> - 注意避开协议头：
https://后不插，否则可能断成https:<wbr>//api...</wbr> - 窄屏场景可额外在数字与字母交界处补插（如
id=abc123456<wbr>7890</wbr>），但别堆砌——每 10–12 字符一个合理断点已足够 - IE 完全不支持
<wbr></wbr>，若仍需兼容，得用 JS 回退或改用（但会引入软连字符风险）
真正难的不是插多少个 <wbr></wbr>，而是判断哪些 URL 真的需要它：API 路径、带长域名的邮箱、嵌入式 token 这类无空格但有天然分隔点的内容才值得干预；如果整页都在靠 <wbr></wbr> 补救，说明响应式 CSS 策略本身已经失焦。
