什么时候该用 <wbr> 而不是 CSS 的 word-break 或 overflow-wrap
<wbr> 是语义级的换行提示，只在浏览器**真的需要折行且当前行已满**时才生效；而 word-break: break-all 会粗暴切断任意位置（比如把 fetchData 拆成 fe- tchDa-ta），overflow-wrap: break-word 虽稍温和，但仍可能在非逻辑点断开。如果你要保留言语结构、API 命名规范或 URL 可读性，<wbr> 是唯一不破坏语义的选择。
- 适合插在驼峰命名大写字母前：
fetch<wbr>Data<wbr>From<wbr>API</wbr></wbr></wbr> - 适合插在 URL 斜杠后：
https://api.example.com/v2<wbr>/users<wbr>/abc1234567890</wbr></wbr> - 适合插在下划线或连字符旁：
user_id<wbr>_v2</wbr>、config-file<wbr>.json</wbr> - 不适合用于普通中文段落或带空格的英文句子——浏览器本就会按词断行
<wbr> 插入位置怎么选才有效
它不是“加了就一定断”，而是给浏览器提供一个**优先候选断点**。插入位置必须是逻辑上可接受的分隔处，否则即使加了也大概率被忽略。
- 浏览器优先考虑：URL 中的
/、.后，驼峰大写字母前，下划线/连字符前后 - 不要插在单词中间无意义位置，如
ex<wbr>ample</wbr>—— 这类位置既无语义也不被浏览器识别为合法断点 - 多个
<wbr>可连续使用，但没必要堆砌；通常每 8–12 个字符设一个合理断点已足够 - 注意：IE 完全不支持
<wbr>，若需兼容 IE，得配合 JS 回退或改用（但后者会引入软连字符风险）
常见错误现象：加了 <wbr> 却没换行
这不是标签失效，而是条件未触发。浏览器只在「容器宽度不足以容纳从上一个断点到下一个断点之间的完整子串」时才会启用它。
- 父容器有
white-space: nowrap—— 直接禁用所有换行机会，包括<wbr> - 字符串太短，或容器足够宽，根本不需要折行
- 用了
<wbr>但前后文本存在强制不换行样式（如font-family: monospace+ 父元素display: inline-block且宽度固定） - 误把
<wbr>当成<br>使用，期待它“总是换行”
和 、<wbr>、CSS hyphens 的关键区别
三者目标相似，但机制和适用场景完全不同。
立即学习“前端免费学习笔记（深入）”；
-
是软连字符，在断行处显示-，且可能被屏幕阅读器读出，语义污染风险高 -
hyphens: auto依赖字典和语言设置，对技术标识符（如v2Endpoint）基本无效，且 Safari 对中文支持差 -
<wbr>不渲染任何字符、不改变 DOM 文本内容、不影响可访问性，是目前处理 API 路径、长 token、嵌入式代码片段的最干净方案 - 注意：
<wbr>是 HTML5 标签，无需闭合，写成<wbr>或<wbr/>均可，但推荐前者以保持一致性
实际中最容易被忽略的是：它不解决“容器本身不收缩”或“文本被包裹在不可折行的 display 模式里”的问题。先确认布局行为正常，再谈断点控制。
