是声明可换行点的HTML标签，仅在文本超宽需折行时生效，适用于长URL、API路径等无天然分隔符场景；不显示符号，兼容主流浏览器，但受white-space、父容器样式及渲染环境影响。

<wbr></wbr> 是一个 HTML 行内标签，用来声明「可换行点」——浏览器在需要折行时，**可以但不必须**在这里断开，且不会影响语义或渲染样式。

什么时候用 <wbr></wbr> 才有效

它只在文本自然无法完整显示在当前行宽、且浏览器决定折行时起作用。常见于长单词、URL、技术标识符等缺乏天然分隔符的场景：

• 嵌入超长 API 路径：/api/v1/users/2345678901234567890/logs，可在斜杠后加 <wbr></wbr>
• 显示未加空格的邮箱前缀：verylongusername<wbr>@example.com</wbr>
• 代码片段中避免撑破容器：<div class="container"><wbr></wbr></div>

注意：如果父容器有 white-space: nowrap 或文本本身能整行放下，<wbr></wbr> 完全不生效。

<wbr></wbr> 和 ­、<span></span> + word-break 的区别

­（软连字符）是 Unicode 字符，仅在折行时显示连字符；<wbr></wbr> 不显示任何符号，纯策略性断点。

word-break: break-all 会强制在任意字符间断行，破坏可读性；overflow-wrap: break-word 只在溢出时尝试找空格或标点断，而 <wbr></wbr> 是你主动指定的“安全断点”。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

简单说：<wbr></wbr> 更精准、更轻量、无副作用，但需你手动插入。

容易被忽略的兼容性和行为细节

现代浏览器（Chrome 30+、Firefox 21+、Safari 7+、Edge 12+）都支持，但要注意：

• 它不能放在块级元素开头或结尾，比如 <p><wbr>Hello</wbr></p> 中的 <wbr></wbr> 会被忽略
• 多个连续 <wbr></wbr> 等价于一个，没必要堆砌
• 和 <span></span> 套用时，若 <span></span> 设了 display: inline-block，可能阻断换行逻辑
• 服务端渲染或某些富文本编辑器会过滤掉 <wbr></wbr>，建议检查输出源码是否保留

真正关键的是：别指望它解决所有换行问题——它只是给浏览器递个建议，最终是否采纳，取决于当前字体、字号、容器宽度和排版引擎的判断。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！