br是强制换行，wbr是软换行机会；br一出现即换行，不受容器宽度影响，而wbr仅在文本溢出且无自然断点时才触发换行，否则隐形不生效。
br 是强制换行，wbr 是“等需要时再断”
<br> 一出现就立刻换行，不管容器宽不宽、内容要不要挤。它像按了回车，行为确定、不可撤销。<:wbr> 不是换行符，是浏览器的“备选断点提示”——只在容器宽度真不够、且当前字符串又没空格/标点可自然断开时，才悄悄在 <wbr> 位置折行。如果整串能放下，<wbr> 就完全隐形。
wbr 插错位置等于白加
它只对逻辑上“本该有分隔”的地方起作用，不是随便塞就能断。常见有效位置包括：
- URL 斜杠后：
/api/v2/<wbr>users</wbr>（不是/api/v2/users<wbr></wbr>） - 域名点号后：
example.<wbr>com</wbr>、admin@<wbr>very-long-domain.<wbr>io</wbr></wbr> - 驼峰大写字母前：
XML<wbr>Http<wbr>Request</wbr></wbr>、user<wbr>Profile<wbr>Data</wbr></wbr> - 数字与字母交界：
v2<wbr>beta</wbr>、id123456789<wbr>abc</wbr>
别插在连续小写字母中间（如 fetch<wbr>Data</wbr>），也别堆砌多个 <wbr>，浏览器只认第一个；更别放在 <p><wbr>文本</p> 这种块级开头——会被忽略。
为什么加了 wbr 却没反应？先查这三处
90% 的“失效”不是标签写错了，而是环境压制了换行机会：
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 父容器设了
white-space: nowrap或word-break: keep-all→ 所有换行逻辑直接被禁用 - 文本在
<pre>、<code>或自定义display: inline-block里 → 默认禁用换行，需显式加white-space: normal - 同时用了
word-break: break-all→ 它和<wbr>互斥，浏览器会跳过所有<wbr>提示
动态渲染的内容（比如 API 返回的 URL）容易漏插 <wbr>，可用正则批量处理，例如匹配 /([\/._?&=#@])(?=\w)/g，替换为 $1<wbr>。
wbr 和 overflow-wrap: break-word 不是替代关系，是协作关系
overflow-wrap: break-word 解决的是“整词放不下时才内部折”，但它对无空格长串仍可能不生效——尤其当父容器是 flex 但子项没设 min-width: 0，或容器本身没设 width/max-width 时。这时候 <wbr> 就成了兜底：它不依赖 CSS 布局机制，直接在 HTML 层标记语义断点。
真正健壮的做法是组合使用：overflow-wrap: break-word + white-space: normal + 在关键位置插入 <wbr>。比如处理用户提交的 URL 字段，既靠 CSS 防溢出，又靠 <wbr> 控制断点位置，避免 https://api.example.com/v2/<wbr>users/<wbr>1234567890</wbr></wbr> 被切成 https://api.example.com/v2/users/1234567 + 890 这种不可读片段。
最易被忽略的一点：wbr 在 IE 中完全不支持，且无法通过 polyfill 补救；如果你的项目仍需兼容 IE，就得 fallback 到 word-break: break-all 或服务端预处理 —— 但那会牺牲可读性。
