是可选换行点，用于长技术词等防溢出场景，仅在必要时由浏览器折行；应插在合法断点如斜杠后、大小写交界前，配合 overflow-wrap: break-word 使用。
<wbr></wbr> 不是“强制换行”，而是“可选换行点”——浏览器只在必要时（比如容器太窄、单词超长）才在这里折行，否则就忽略它。
什么时候该用 <wbr></wbr> 而不是 <br> 或 CSS
适用于长技术词、URL、文件路径、哈希值等无法自然断开但又必须防溢出的场景。比如：https://example.com/api/v2/users/1234567890abcdef，直接放页面里可能撑破容器。<br> 是硬换行，破坏语义；CSS 的 word-break: break-all 会乱切单词，不友好。
-
<wbr></wbr>语义清晰：仅建议“这里可以断”，由浏览器决定是否真断 - 比
white-space: pre-wrap更轻量，不影响其他排版行为 - 兼容性好：Chrome 11+、Firefox 14+、Safari 5.1+、Edge 12+ 都支持
<wbr></wbr> 放在哪？位置细节很关键
必须插在单词内部的“合法断点”处，比如连字符后、斜杠后、下划线后、大小写交界（驼峰）前。放错位置会导致无效或视觉割裂。
- ✅ 推荐：
user<wbr>id</wbr>、API<wbr>v2</wbr>、https://example.com/api<wbr>/v2<wbr>/users</wbr></wbr> - ❌ 无效：
us<wbr>erid</wbr>（中间乱切）、user<wbr>id</wbr>放在字母间但无语义依据（如u<wbr>serid</wbr>） - ⚠️ 注意：HTML 解析会忽略
<wbr></wbr>前后的空白，但别把它塞进标签属性里（如class="my<wbr>class"</wbr>不生效）
和 CSS 换行策略怎么配合用？
<wbr></wbr> 是补充手段，不是替代方案。真实项目中常组合使用：
立即学习“前端免费学习笔记（深入）”；
- 容器加
overflow-wrap: break-word（让超长单词整体可换行） - 再在关键位置插入
<wbr></wbr>，引导浏览器优先在更合理的点断开 - 避免同时用
word-break: break-all，它会无视<wbr></wbr>的提示
例如：
<p style="overflow-wrap: break-word;"> https://api.example.com/v1/data/writer<wbr>config<wbr>update<wbr>endpoint </p>
容易被忽略的坑
最常见的是当成“空格占位符”滥用：有人在每个字母后加 <wbr></wbr>，以为能自由控制断点——这不仅无效，还会增加 DOM 节点数、影响可访问性（屏幕阅读器可能误读）。另一个问题是服务端模板里动态插入时没转义，比如把 <wbr></wbr> 当字符串拼进 JS 变量导致语法错误。
真正有效的 <wbr></wbr> 很少，但用对一个，就能让一整段 API 文档或日志输出变得可读又不溢出。
