wbr 只在浏览器需折行时才起作用，需配合 overflow-wrap: break-word、宽度约束及 white-space: normal 才生效，否则仅是无效果的标签。
wbr 不会让文字“一定换行”，它只在容器宽度不足、浏览器真要折行时，才考虑你标出的语义断点——加了没反应，大概率不是标签写错了，而是环境没给它机会。
为什么加了 wbr 还是不换行
根本原因不是 HTML 写错，而是浏览器压根没进入“需要换行”的判断逻辑。常见压制条件包括：
- 父容器设置了
white-space: nowrap或display: inline-block但没设max-width - 文本被包在
<code>、<pre class="brush:php;toolbar:false;"></pre>或按钮里，默认禁用自动换行（需手动加white-space: normal） - CSS 中写了
word-break: break-all——它会直接绕过所有wbr，暴力切字 - 用了
word-break: keep-all（尤其在中日韩排版场景），连英文驼峰词都不让断 - 容器宽度其实足够，整串内容根本没到触发折行的临界点
wbr 该插在长单词的哪些位置才被识别
浏览器只对符合语言/技术逻辑的分隔点响应，乱插等于白加。有效位置必须满足“人眼觉得这里可以断”：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- URL 中的
/、.、@、?、&后：https://api.<wbr>example.<wbr>com/<wbr>v2/<wbr>users</wbr></wbr></wbr></wbr> - 驼峰命名大写字母前：
fetch<wbr>Data<wbr>From<wbr>API<wbr>V2</wbr></wbr></wbr></wbr>（不是fe<wbr>tchData</wbr>） - 下划线或连字符两侧：
user_<wbr>id</wbr>、config-<wbr>file</wbr> - 数字与字母交界处：
v2<wbr>beta</wbr>、id123<wbr>abc</wbr> - ❌ 避免插在普通英文单词中间（
hel<wbr>lo</wbr>）、纯数字串任意位置（123<wbr>456</wbr>）、单音节内（in<wbr>ter<wbr>na<wbr>tion</wbr></wbr></wbr>）
必须搭配的 CSS 才能让 wbr 生效
wbr 本身不驱动换行，它完全依赖父容器的排版策略。窄屏下想让它起作用，这三样 CSS 缺一不可：
- 容器要有明确宽度约束，例如
max-width: 375px或width: 100% - 确保换行上下文启用：
white-space: normal（默认值，但容易被子元素或框架样式覆盖） - 必须设置
overflow-wrap: break-word——它会优先尝试wbr标记的位置，再 fallback 到其他策略 - ⚠️ 绝对不要同时用
word-break: break-all，二者互斥；若内容含中文或需兼容旧环境，可降级为hyphens: auto+，但会引入视觉连字符
动态插入比手写更可靠，尤其在响应式场景
手动给每个 URL 或 API 路径加 wbr 不现实，且窄屏需要更多断点、宽屏又怕多余断点影响渲染。推荐用 JS 处理：
- 对 API 返回的 URL，可用正则匹配路径分隔符：
/([\/._?&=#@])(?=\w)/g，替换为$1<wbr></wbr> - 对驼峰变量名，可用
/([A-Z])/g匹配大写字母，在其前插入<wbr></wbr>（注意首字母除外） - 对 Base64 或哈希值等机器生成字符串，每 4 个字符后加
<wbr></wbr>比硬编码更可控 - 别忘了重置
<code>默认样式：<code style="white-space: normal">https://<wbr>/path</wbr>，否则wbr在<code>内无效
最容易被忽略的一点：加了 wbr 不代表它一定会起作用——它必须和 overflow-wrap: break-word + 宽度约束一起配合，且不能被更高优先级的 white-space 或 word-break 规则覆盖。否则，它就只是 DOM 里一个安静的、毫无存在感的标签。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
