wbr仅在容器宽度不足且满足条件时提供语义断点，需配合max-width、white-space:normal和overflow-wrap:break-word才生效。
wbr 不会让长单词“自动折断”，它只是在浏览器**真撑不下、必须换行时**，提供一个语义上合理的断点建议。加了不等于断了，宽屏下基本没反应，窄屏下也得满足一堆条件才可能生效。
为什么 wbr 插了却完全不换行
这不是标签写错了，而是浏览器压根没触发换行判断：
- 父容器没设
max-width或明确宽度（比如width: 100%但外层是display: inline-block且无约束）→ 浏览器认为“还能装”，根本不会看wbr -
white-space: nowrap或white-space: pre被继承或显式设置 →wbr直接被忽略，连候选资格都没有 - 内容包在
<code>标签里 → 默认是white-space: nowrap，得手动加white-space: normal - CSS 用了
word-break: break-all→ 它会绕过所有wbr，直接暴力切开，wbr形同虚设
wbr 应该插在长单词的哪些位置才有效
插错位置，浏览器就当没看见。它只认天然有分隔感的地方，不是“每 4 个字符加一个”：
- ✅ 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>（不是fe<wbr>tchData</wbr>） - ✅ 下划线/连字符两侧：
user_<wbr>id</wbr>、config-<wbr>v2</wbr> - ❌ 普通英文单词中间：
ex<wbr>ample</wbr>—— 无语义分隔，多数浏览器跳过 - ❌ 纯数字串任意位置：
1234567890<wbr></wbr>—— 不提升可读性，也不被识别为合法断点
必须配合的 CSS 才能让 wbr 生效
wbr 是纯提示，不带任何排版逻辑。以下三样缺一不可：
- 容器要有宽度限制：
max-width: 375px或width: 100%; max-width: 100%（响应式场景推荐后者） - 确保换行允许：
white-space: normal（默认值，但容易被父级覆盖，需检查） - 指定换行策略：
overflow-wrap: break-word（它会优先尝试wbr位置；word-break: break-all会彻底无视它）
对代码类文本，可加 white-space: pre-wrap：保留缩进和空格，同时让 wbr 可用。
动态插入比硬编码更靠谱
手写每个 wbr 在响应式页面里不现实，尤其移动端需要更多断点：
- 前端可用正则匹配常见模式，比如 URL 路径中的
/、查询参数的&或=，替换为$1<wbr></wbr> - 对驼峰变量名，用
/([a-z])([A-Z])/g替换为$1<wbr>$2</wbr> - 服务端模板若转义了标签（如 Django 的
{{ url|safe }}），漏掉|safe就等于白写
真正容易被忽略的是：它只在“不得不”的时候才动——你得先让容器窄到撑不下，再给它留出语义上能接受的断点，最后还得关掉所有会压制它的 CSS。少一个环节，wbr 就静默失效。
