优先用 overflow-wrap: break-word，需同时满足 max-width、white-space: normal 和 overflow-wrap: break-word 三条件，否则浏览器不触发断行；禁用 word-break: break-all 以免破坏 URL 可点击性。

为什么加了还是撑破容器

根本不是没写对，而是它压根没被浏览器“看到”——只在换行上下文启用时才参与排版。常见压制场景包括：white-space: nowrap、父容器是<pre>或<code>、子元素用了display: inline-block却没设max-width。这些都会让彻底失效，浏览器直接无视所有断点建议。

必须配齐的三个 CSS 条件

本身不驱动换行，它依赖父容器的排版策略。窄屏下让它起作用，这三样缺一不可：

• max-width 或明确宽度（如 width: 100%、max-width: 375px），否则浏览器无法判断“是否放不下”
• white-space: normal（显式声明更安全，避免被框架样式覆盖）
• overflow-wrap: break-word（现代标准写法；word-wrap: break-word可兼容旧 IE）

⚠️ 绝对不要同时加 word-break: break-all——它会绕过所有，暴力切字，破坏 URL 可点击性。

wbr该插在 URL 的哪些位置才有效

浏览器只响应符合语言/技术逻辑的断点。乱插等于白加，甚至降低可读性：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

立即学习“前端免费学习笔记（深入）”；

• ✅ 推荐位置：斜杠/后、点号.后、@后、连字符-后、查询参数分隔符?&=后
• ❌ 避免位置：协议头后（如 https://<wbr>example.com</wbr>）、域名中间（如 ex<wbr>ample.com</wbr>）、纯数字串任意位置（如 123<wbr>456</wbr>）、单音节英文内（如 in<wbr>ter<wbr>na<wbr>tion</wbr></wbr></wbr>）
• ? 实际例子：https://api.<wbr>example.<wbr>com/<wbr>v2/<wbr>users/<wbr>1234567890</wbr></wbr></wbr></wbr></wbr>

动态插入比手写更可靠

手动给每个 URL 加不现实，且宽屏下多余断点可能引发文字碎裂。更优解是用正则批量注入：

url.replace(/([\/._?&=#@])(?=\w)/g, '$1<wbr>')

这个表达式只在自然分隔符后插入，配合overflow-wrap: break-word和max-width: 100%，让浏览器按需选择断点——它比人预判得更准，也更省资源。

真正难的不是插标签，而是判断哪些 URL 真的需要它：窄屏显示 API 路径、邮箱、长域名链接时，是少数几个既轻量又可控的手段；但若整个页面都靠它补救，说明 CSS 层面的响应式策略已经失焦。