加了<wbr>却没换行，是因为浏览器未触发换行判断，需同时满足容器宽度不足、无自然断点、CSS允许换行；必须配合max-width、overflow-wrap: break-word和white-space: normal才生效。
为什么加了 wbr 却没换行？先查这三件事
不是标签坏了，而是浏览器压根没进入“需要换行”的判断流程。wbr 是静默提示，不触发、不报错、不警告——它只在容器宽度不足 + 文本无自然断点 + 排版策略允许时才被考虑。
-
white-space: nowrap被继承或显式设置（常见于<button>、<nav>、自定义inline-block容器）→ 浏览器跳过所有换行逻辑 -
word-break: keep-all或word-break: break-all同时存在 → 前者直接忽略wbr，后者绕过它暴力切字 -
wbr插在了无效上下文里：比如<pre>、<code>默认禁用换行，或写成<p><wbr>文本</p>—— 它只对紧邻的后续文本生效，开头空wbr被忽略
wbr 该插在哪几个位置才真正起作用
浏览器不认“你希望它断”，只认“语言/协议本身允许断”。插错位置等于白加，且可能增加 DOM 节点负担。
- URL 斜杠后：
https://api.example.com/v2/<wbr>users</wbr>（不是/v<wbr>2/users</wbr>） - 域名点号后：
example.<wbr>com</wbr>、admin@<wbr>very-long-domain.<wbr>io</wbr></wbr> - 驼峰命名大写字母前：
XML<wbr>Http<wbr>Request</wbr></wbr>（不是XM<wbr>LHttp</wbr>） - 查询参数分隔符后：
?q=<wbr>hello&limit=<wbr>50</wbr></wbr> - 邮箱
@后：contact@<wbr>company.example</wbr>（@前不建议）
为什么不能只靠 wbr，必须配 CSS
wbr 是内容层提示，不带任何排版能力。它依赖父容器的样式策略才能被纳入换行候选队列。
- 容器必须有宽度约束：
max-width: 100%或具体值（如max-width: 375px），否则浏览器认为“足够宽”，不启动折行计算 - 必须启用
overflow-wrap: break-word—— 它会让浏览器把整串无空格文本当作“可拆词”，否则wbr不会被纳入候选 - 确保
white-space: normal（默认值，但容易被继承覆盖），禁用white-space: pre或pre-wrap（除非你明确需要保留空格） - 避免
word-break: break-all：它和wbr互斥，一旦启用，浏览器直接跳过所有语义断点
动态内容怎么安全插入 wbr？别手写
手动在模板里补 wbr 易漏、难维护，尤其面对 API 返回的 URL、哈希值、错误码等不可控长字符串。
立即学习“前端免费学习笔记（深入）”；
- 前端可用正则批量处理，例如匹配
/([\/._?&=#@])(?=\w)/g，替换为$1<wbr> - 服务端模板封装过滤器：Nunjucks 中
{{ path | wbr }}，Django 中{{ url|safe_wbr }}（注意 XSS 防御） - 对
<code>内容需额外重置样式：<code style="white-space: normal; overflow-wrap: break-word">https://<wbr>api.<wbr>com</wbr></wbr></code> - IE 完全不支持
wbr，若需兼容，得降级为（但会显示连字符）或 JS 动态注入
wbr，而是判断哪些位置既符合语义、又能在窄屏下被浏览器实际采纳——打开 DevTools 缩小容器宽度，盯着渲染结果看，而不是只信源码。 
