1. 认识 <wbr> 元素
<wbr> 是 HTML 中的「可换行机会」元素（Word Break Opportunity）。它本身是一个空元素，只有开始标签没有结束标签，也不会在页面上产生任何可见内容。
它的作用是：在浏览器需要自动换行时，告诉浏览器「这里允许换行」 。当一段很长的、没有空格的文本（比如很长的 URL、代码路径、下划线连接的名称等）超出容器宽度时，普通情况下浏览器无法换行，可能导致文字溢出或强制撑开布局；而 <wbr> 提供了一个可选、可控的换行点。
简单来说：
2. <wbr> 与 <br> 的区别
这是最容易混淆的一对标签，但二者的行为完全不同：
| 元素 | 换行行为 | 是否占用内容 | 是否强制 |
|---|---|---|---|
<br> |
强制换行 | 是换行元素，始终产生断行 | 无条件 |
<wbr> |
允许换行 | 不产生任何可见换行 | 仅在需要时生效 |
举例说明：
html
<!-- 无论宽度如何，这两个词一定被 br 拆成两行 -->
<p>JavaScript<br>TypeScript</p>
<!-- 只有当容器放不下时，才可能在 wbr 处断行 -->
<p>JavaScript<wbr>TypeScript</p>可以理解为：<br> 是命令式的「必须在这里断」，<wbr> 是协商式的「必要时可以在这里断」。
3. 基本语法
<wbr> 是一个空元素，直接放在希望允许换行的位置即可：
html
<p>
这是一个超长的下载地址：
https://example.com/very/long/path/<wbr>with/many/segments/<wbr>that/have/no/spaces
</p>它不需要闭合标签，即 不要 写成 <wbr></wbr>。在合法的 HTML 中，<wbr> 也可以写作 <wbr />，两者等价。
4. 典型应用场景
4.1 超长 URL 或链接
URL 中往往没有空格，放在窄容器里很容易溢出：
html
<p>
访问文档：
https://developer.example.com/docs/<wbr>api/v2/authentication/<wbr>oauth2/redirect-uris
</p>4.2 代码路径与命令
博客或文档中经常出现很长的路径：
html
<code>
/usr/local/lib/node_modules/<wbr>@scope/<wbr>package-name/<wbr>dist/index.js
</code>4.3 以下划线或小驼峰连接的长名称
html
<p>
字段名：
this_is_an_extremely_long_variable_name_<wbr>that_exceeds_container_width
</p>4.4 数据串或长数字
html
<p>
订单号：
ORD2026<wbr>101209<wbr>4837<wbr>5500<wbr>9
</p>5. 浏览器兼容性
<wbr> 的兼容性良好，现代浏览器均已支持，包括 Chrome、Firefox、Safari、Edge 以及移动端浏览器。
需要特别说明的历史情况：
- 早期 Internet Explorer 5.5 至 7 曾支持
<wbr>，但 IE8 至 IE11 一度不再支持； - 现在 IE 已停止维护，因此在实际项目中基本可以放心使用；
- 如果仍需兼顾极老的浏览器，可以考虑用零宽空格
\u200B作为兼容替代，但零宽空格会进入复制文本中，可能污染数据；<wbr>在复制时则不会引入多余字符，这是它的优势。
6. 使用注意事项
6.1 <wbr> 更适合作为语义点
只在「合理」的位置放置 <wbr>，比如 URL 的路径分隔符附近、长变量名的分段处。不要每隔一个字符就插入一个 <wbr>，那样既无意义，也影响代码可读性。
6.2 与 CSS 的配合
有时可以用 CSS 控制长文本的换行行为，两者并不冲突：
css
.long-text {
overflow-wrap: break-word;
word-break: break-all;
}区别在于：
- CSS 的
overflow-wrap: break-word是浏览器自动寻找断点； <wbr>是开发者手动指定断点。
如果希望完全自主控制换行位置，<wbr> 是更精确的选择。
6.3 复制文本时无副作用
与零宽空格不同，用户复制包含 <wbr> 的文本时，<wbr> 不会成为文本的一部分，粘贴结果仍然连续、干净，不会混入不可见字符。
7. 小结
<wbr> 是一个体积小但很实用的话题元素：
- 它不强制换行，只提供「可换行机会」；
- 它适合处理 URL、代码路径、长命名等没有空格的超长文本；
- 它兼容现代浏览器，复制无副作用；
- 与
<br>的职责完全不同，不要混淆。
在响应式布局和窄屏场景下，合理使用 <wbr> 可以有效避免长文本溢出、保持排版整洁。