<wbr>是仅在容器宽度不足时才生效的隐形断点标记，不插入连字符或空格，适用于长URL等需保语义与可点击性的场景；它必须插在斜杠、点号、@等自然分隔点后，且依赖white-space: normal和overflow-wrap: break-word等CSS配合才能生效。
<wbr> 不是换行符，它只在容器宽度不足、浏览器需要折行时才生效，且不插入连字符或空格——这是处理长 URL 的最小侵入方案。
为什么长 URL 用 <wbr> 而不是 word-break: break-all
强制切开 URL（如 https://api.example.com/v2/u<wbr>sers</wbr>）会破坏语义和可点击性；word-break: break-all 可能在任意字符间断开，比如把 users 切成 us<wbr>ers</wbr>，导致链接失效或误读。而 <wbr> 只在自然分隔点（如 /、.、@ 后）提供断点，浏览器优先选这些位置，既保可读性，又防溢出。
-
break-all在中文、数字串中也粗暴切割，<wbr>完全避开这类区域 -
overflow-wrap: break-word只对整词超宽生效，但 URL 是单个“词”，它压根不触发 -
<wbr>不影响屏幕阅读器朗读，也不改变 DOM 结构或语义
URL 中 <wbr> 的正确插入位置
必须插在逻辑上允许断开的位置，否则无效或降低可读性。浏览器不会在 192.168.0.1 的数字中间断，也不会在 admin@ 的 @ 前硬断。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 斜杠后：
/api/v2/<wbr>users</wbr>（不是/api/<wbr>v2/users</wbr>） - 点号后：
example.<wbr>com</wbr>、admin@<wbr>very-long-company-name.<wbr>example.<wbr>com</wbr></wbr></wbr> - @ 符号前后均可，但推荐在
@后：contact@<wbr>company.<wbr>io</wbr></wbr> - 查询参数分隔符后：
?include=profile,<wbr>permissions</wbr>、&page=<wbr>2</wbr>
常见失效原因与绕过方式
<wbr> 生效依赖两个前提：容器有明确宽度限制 + 文本处于可换行上下文。很多情况下它“没反应”，其实是被 CSS 或父元素压制了。
立即学习“前端免费学习笔记（深入）”；
- 父容器设了
white-space: nowrap或display: inline-block且未设width→ 移除或改用max-width - 文本包裹在
<pre>或<code>里，默认禁用换行 → 改用<span>并加white-space: normal - 用了
word-break: break-all→ 它会直接忽略<wbr>，二者互斥，二选一 - 动态渲染的 URL 没插入
<wbr>→ 前端可用正则批量注入，例如匹配/([\/._?&=#@])(?=\w)/g后替换为$1<wbr>
真正难的不是插标签，而是判断哪些 URL 真的需要它：窄屏设备上显示 API 路径、邮件地址、带长域名的链接时，<wbr> 是少数几个既轻量又可控的手段；但若整个页面都靠它补救，说明 CSS 层面的响应式策略已经失焦。
