<wbr>不换行是因为浏览器未触发换行判断，需同时满足容器宽度不足、当前行已满、后续文本放不下且无自然断点；须插在URL斜杠后、驼峰大写字母前等语义位置，并配合max-width、white-space:normal和overflow-wrap:break-word才生效。
为什么加了 <wbr> 却完全不换行
它不是换行符，只是告诉浏览器“这里可以断”，但浏览器只在真撑不下时才考虑——前提是没被 CSS 封死。常见静音原因：
父容器设了 white-space: nowrap 或 display: inline-block 且没给 max-width
文本包在 <code> 或 <pre> 里，默认禁用自动换行
用了 word-break: keep-all（中日韩排版常用）或 overflow-wrap: normal
服务端模板转义了标签，比如 Django 模板里没加 |safe，Nunjucks 没关 autoescape
<wbr> 插在哪才算有效断点
插错位置等于白加。浏览器只认逻辑上自然可拆分的位置：
URL 中：插在 / 后、. 后、@ 后、? 和 & 前，例如 https://<wbr>api.<wbr>example.<wbr>com/<wbr>v2/<wbr>users</wbr></wbr></wbr></wbr></wbr>
驼峰命名：插在大写字母前，如 fetch<wbr>Data<wbr>From<wbr>API</wbr></wbr></wbr>（不是 fet<wbr>chData</wbr>）
下划线/连字符：插在 _ 或 - 两侧，如 user_<wbr>id</wbr>、api-<wbr>v2</wbr>
数字与字母交界：如 v2<wbr>beta</wbr>、id123<wbr>abc</wbr>
避免插在纯小写字母串中间（如 hello<wbr>world</wbr>）、连续数字中（如 123<wbr>456</wbr>）
必须配哪些 CSS 才能让 <wbr> 生效
单写标签没用，它依赖样式层配合：
容器必须有宽度约束，比如 max-width: 375px 或 width: 100%，否则浏览器无“撑不出去”的判断依据
显式声明 white-space: normal（虽是默认值，但防被继承覆盖）
关键补上 overflow-wrap: break-word：它会让浏览器优先尝试 <wbr> 位置，再 fallback
禁用 word-break: break-all——它会绕过所有 <wbr>，直接硬切，URL 失去可点击性
对代码类内容，可用 white-space: pre-wrap，既保留空格又允许 <wbr> 起作用
自动化注入 <wbr> 的安全边界
手动插不可持续，但自动处理要避开坑：
前端 JS 遍历时，只处理纯文本节点，避开 <button>、<input value=""> 等不解析 HTML 的上下文
正则替换要先做 HTML 实体转义，比如把 < → ，再插 <code><wbr>，否则用户输入含 <script> 会触发 XSS
服务端过滤器（如 Nunjucks 的 {{ path | wbr }}）比客户端更轻量，SSR 阶段只跑一次
别对整段中文或带空格的英文句子批量插——中文本就按字断，英文已有空格，加了反而增 DOM 节点负担
移动端响应式场景下，不要为窄屏额外多插；统一密度（如只在 /、.、@ 后）配合 max-width: 100%，让浏览器自己决策更稳
立即学习“前端免费学习笔记（深入）”；
