该用<wbr>而非<br>时：<wbr>是可选换行点，仅在容器宽度不足时折行，适用于长单词、URL、代码等需防溢出但不宜强制断行的场景；<br>则强制换行，用于地址、诗行等语义必需处。
什么时候该用 <wbr> 而不是 <br>
<wbr> 不是换行符，它只是“可换行点”——浏览器只在需要折行且当前行宽不够时，才考虑在这里断开。而 <br> 是强制换行，不管容器多宽都会硬折。所以：<wbr> 适合长单词、URL、代码片段等**本不该被截断但又可能撑破容器**的场景；<br> 仅用于语义上必须换行的位置（如地址、诗行）。
<wbr> 在 URL 或文件路径中怎么插才有效
浏览器对 URL 的断行策略较保守，单纯靠空格或标点（如 /、.、-）不一定触发折行。这时要在潜在断点前手动加 <wbr>，比如：
<p>https://example.com<wbr>/very<wbr>/long<wbr>/path<wbr>/to<wbr>/resource.json</p>
常见有效插入位置包括：/ 后、. 前、- 和 _ 两侧。注意不要插太多，否则可能在不该断的地方断开（比如 user<wbr>name 变成 “user-” 换行）。
CSS 的 word-break 和 <wbr> 冲突吗
会。如果设置了 word-break: break-all，浏览器会无视 <wbr>，直接在任意字符间断开；而 overflow-wrap: break-word 仍尊重 <wbr>，优先在标记处折行。推荐组合：
立即学习“前端免费学习笔记（深入）”；
- 默认行为（
overflow-wrap: normal）+<wbr>：最可控 - 避免用
word-break: break-all，除非你真要暴力截断 - 对代码块等容器，加
white-space: pre-wrap可保留空格同时允许<wbr>生效
现代框架里怎么安全注入 <wbr>（React/Vue）
不能直接写字符串 "<wbr>"，会被当纯文本渲染。React 需用 dangerouslySetInnerHTML 或拆成 JSX 元素；Vue 用 v-html 或组件封装。更稳妥的做法是封装一个 Wbr 组件：
// React 示例 const Wbr = () => <wbr /> // 使用：<span>very<Wbr />long<Wbr />word</span>
注意：服务端渲染（SSR）时确保 <wbr> 标签不被过滤，某些模板引擎默认移除未知标签，需显式配置白名单。
真正难的不是插标签，而是判断哪里该插——得结合字体宽度、容器最大宽、用户设备 DPR 动态估算，静态插一堆 <wbr> 在高分屏下可能反而多余。
