是html5中用于标记可选断点的空元素，仅在容器宽度不足且当前行已满时生效，正确用法是在url斜杠、点或驼峰大写字母前插入，需搭配overflow-wrap: break-word且禁用word-break: break-all。
用 <wbr></wbr> 在词组间标记可选断点
<wbr></wbr> 不是强制换行，而是告诉浏览器“这里可以断，但不是必须”。它只在容器宽度不足、文本自然溢出、且当前行已满的条件下才生效。比如长 URL 或驼峰命名变量名，加在斜杠/、点.、大写字母前最可靠。
常见错误现象：<wbr></wbr> 插在普通单词中间（如 hel<wbr>lo</wbr>）完全无效；父容器没设 max-width 或用了 white-space: nowrap，它也静默失效。
- ✅ 正确位置：
https://<wbr>api.<wbr>example.<wbr>com/<wbr>v2/<wbr>users</wbr></wbr></wbr></wbr></wbr> - ✅ 搭配 CSS：
overflow-wrap: break-word（优先在<wbr></wbr>处折），禁用word-break: break-all - ⚠️ 注意：HTML5 中必须写成
<wbr></wbr>，<wbr></wbr>写法部分解析器会忽略
white-space: pre-line 处理后端返回的带 \n 词组
后端吐出的地址、多行简介等文本含 \n，直接塞进 v-html 或 innerHTML 不会换行——浏览器默认忽略所有空白符。此时不该手动 .split('\n').map() 拼 DOM，有 XSS 风险且绕过响应式更新。
✅ 推荐做法：给容器加 white-space: pre-line。它保留源码中的换行符，合并多余空格，并允许自动折行。兼容 IE11？改用 white-space: pre-wrap，但注意首尾空格会被保留。
❌ 别用 <pre class="brush:php;toolbar:false;"></pre> 包裹普通文本：等宽字体 + 无法响应式折行，破坏排版一致性。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
防折行场景别用 <nobr></nobr>，改用 white-space: nowrap
<nobr></nobr> 是废弃标签，HTML5 不再支持，现代项目中必须替换。真正可控、可继承、可组合的方案是 CSS：white-space: nowrap。
但它不是孤立有效的：需配合 width 或 max-width 触发溢出，再加 text-overflow: ellipsis 和 overflow: hidden 才能稳定显示省略号。单独写 white-space: nowrap 可能撑破容器，尤其在 Flex 子项或表格单元格里。
- ✅ 安全用法：
<div style="white-space: nowrap; width: 200px; overflow: hidden; text-overflow: ellipsis;">超长不换行列名</div> - ⚠️ 常见坑：对
<span></span>直接设nowrap但父级display: flex未设flex-shrink: 0，仍会被压缩变形
<br> 不适合词组换行，语义和响应式都踩雷
<br> 是结构性换行，写死断点，不随容器宽度变化。用它强行拆分词组（如 用户名<br>邮箱）会导致小屏多出空行、大屏留白难看，更关键的是——它破坏语义：屏幕阅读器跳过 <br>，SEO 抓取时视作同一段落，打印时可能错位。
真正需要词组视觉分离的场景，应优先用语义化结构：<p></p> 分段、<dl>
<dt></dt>
<dd></dd>
</dl> 描述列表、或 Flex/Grid 布局控制排列。只有地址、诗歌、签名这类天然逐行对齐且逻辑上属于同一段的内容，才考虑 <br>。
复杂点在于判断「该不该由 HTML 控制换行」——<wbr></wbr> 和 white-space 是日常主力，<br> 是手术刀，只切固定结构；而 <nobr></nobr> 已经该进回收站了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
