是语义化断点标记，仅在容器宽度不足时由浏览器自主决定是否换行，不强制断行、不添加空格或连字符；必须配合 overflow-wrap: break-word 和宽度约束才生效，适用于长URL、驼峰名等无自然分隔符的字符串。
直接说结论：<wbr></wbr> 不是“让文字换行”，而是告诉浏览器“这里可以断，但你得自己判断要不要断”——它只在容器太窄、整串内容放不下时才生效，且不加空格、不插连字符、不改变语义。
什么时候必须用 <wbr></wbr> 而不是 <br> 或 CSS 换行
你在渲染一个长 URL、API 路径、驼峰变量名或无分隔符的序列号（比如 fetchDataFromAPIv2、https://api.example.com/v2/users/abc1234567890），而这些内容默认不会在任意位置折行，导致横向溢出或破坏响应式布局。
-
<br>是强制换行，不管宽不宽都立刻断，会破坏窄屏下的可读性（比如宽屏下多出空行） - CSS 的
word-break: break-all会在任意字母间切开，URL 变成https://api.exa…，失去可点击性 -
overflow-wrap: break-word只在整词超宽时 fallback 断开，无法指定断点位置 -
<wbr></wbr>是唯一能嵌入内容内部、提供语义化断点的方案
<wbr></wbr> 插在哪才真正起作用
它只在逻辑上自然可拆分的位置才有意义。浏览器会优先考虑这些点，但最终是否断开，取决于当前行剩余空间和后续内容长度。
- ✅ 推荐位置：URL 的
/后、.后；驼峰命名中大写字母前（如myVariable<wbr>Name</wbr>）；下划线前后（user_<wbr>id</wbr>）；连字符两侧（api-<wbr>v2</wbr>） - ❌ 无效位置：普通英文单词中间（
hel<wbr>lo</wbr>）、纯数字串任意位置（123<wbr>456</wbr>）、<pre class="brush:php;toolbar:false;"></pre>或white-space: nowrap容器内 - ⚠️ 注意：不要贪多。一个长 URL 插 3–5 个
<wbr></wbr>就够了，过多反而增加解析负担，且可能在宽屏下引入不可见的断点风险
CSS 必须配合，否则 <wbr></wbr> 形同虚设
<wbr></wbr> 本身不触发换行，它依赖父容器的排版策略。没有合适的 CSS，它就完全隐形——不报错、不警告、也不生效。
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
立即学习“前端免费学习笔记（深入）”；
- 必须设置容器宽度约束，比如
width: 300px或max-width: 100% - 推荐搭配：
overflow-wrap: break-word（尊重<wbr></wbr>断点） - 绝对避免：
word-break: break-all—— 它会绕过所有<wbr></wbr>，直接暴力切字 - 别忘了重置
<code>默认样式：<code style="white-space: normal">https://...<wbr>/path</wbr>，否则<wbr></wbr>在<code>内无效
兼容性和服务端陷阱
现代浏览器（Chrome 30+、Firefox 21+、Safari 10+、Edge 14+）全支持，IE 完全不支持。但真正容易出问题的，往往不是浏览器，而是你的模板引擎或 SSR 流程。
- Django 模板里写
{{ url|safe }}，否则<wbr></wbr>被转义成字符串 - EJS 或 Nunjucks 中，确保输出未被自动转义；Node.js
res.send()要设Content-Type: text/html - 零宽空格
可作 IE 兜底，但复制粘贴会带入不可见字符，编辑器显示异常，语义也弱 - 最隐蔽的坑：你加了
<wbr></wbr>，CSS 也写了，但父元素用了display: flex且没设flex-wrap: wrap—— 此时文本被强制单行伸展，<wbr></wbr>依旧不会触发
真正起效的 <wbr></wbr> 往往藏在你没注意到的长标识符里，而不是显眼的段落中间；一旦加错位置或配错 CSS，它就彻底隐形——既不报错，也不留痕迹。
