<wbr>是软换行提示符，仅在窄屏且内容溢出时、未被white-space: nowrap等禁用时，在预设断点（如斜杠、点号、大小写切换处）智能换行，需配合overflow-wrap: break-word和宽度限制才生效。
什么时候加 <wbr> 才真有用
只在无空格、无标点的长字符串中存在天然逻辑断点时才需要：<wbr> 对普通中文段落、带空格的英文句子、或已有标点（如逗号、括号）的位置毫无意义。
- 超长 URL：插在
https://后、//前、域名点号.后、路径斜杠/后 - 驼峰变量名：插在大小写切换处，如
fetch<wbr>Data<wbr>From<wbr>API</wbr></wbr></wbr>（注意不是fet<wbr>chData</wbr>） - 邮箱本地部分：如
admin+notif<wbr>ication2026@example.com</wbr>，仅在+或数字/字母交界处谨慎插入 - 技术路径或序列号：如
/v2/<wbr>users/<wbr>abc1234567890</wbr></wbr>，避免插在连续小写字母中间
<wbr> 为什么有时完全没反应
它被“静音”的常见原因不是标签写错了，而是环境不支持：
- 父容器设了
white-space: nowrap—— 直接封死所有换行可能 - CSS 中用了
word-break: keep-all或overflow-wrap: normal（未启用break-word） - 容器宽度足够，整串内容根本没到触发折行的临界点
- 用了等宽字体（
font-family: monospace）+ 固定宽 inline-block，浏览器放弃弹性布局逻辑
和 CSS 换行策略的关键区别在哪
<wbr> 是唯一能嵌进字符串内部、指定“语义断点”的方案；而 CSS 是全局开关：
-
word-break: break-all会把https切成ht和tps，URL 失去可点击性 -
overflow-wrap: break-word只在整词超宽时 fallback 断开，无法控制断在哪 -
<wbr>插对位置后，窄屏下优先在斜杠、点号、大小写切换处断，复制粘贴内容不变，屏幕阅读器朗读也不受影响 - 它不兼容 IE，但现代 Chromium/Firefox/Safari 都已稳定支持
最容易被忽略的一点：加了 <wbr> 不代表它一定会起作用——它必须和 overflow-wrap: break-word + 宽度约束一起配合，且不能被更高优先级的 white-space 或 word-break 规则覆盖。否则，它就只是 DOM 里一个安静的、毫无存在感的标签。
