仅适用于地址、诗歌等“换行即内容”的场景；禁用于标题、按钮等非文本容器；必须用而非或；配合white-space: pre-line处理后端\n；超长字符串需用overflow-wrap: break-word而非。
<br> 是唯一能直接在 HTML 文本流中插入单次换行的原生方式，但它不是万能的——用错地方会破坏语义、影响可访问性，甚至被屏幕阅读器跳过。
什么时候必须用 <br>？
它只适合「换行即内容」的场景，比如地址、诗歌、歌词、签名档这类天然需要逐行对齐的文本。
- 地址：
<p>北京市朝阳区建国路8号<br>SOHO现代城A座1208室<br>邮编：100022</p> - 诗歌：
<p>白日依山尽，<br>黄河入海流。<br>欲穷千里目，<br>更上一层楼。</p> - 避免在
<h1></h1>、<button></button>或表单控件里滥用 —— 它们不是文本容器，加<br>可能导致布局错位或焦点顺序混乱
<br> 的写法和常见错误
HTML5 中只接受 <br>（无斜杠），<br> 是 XHTML 遗留写法，现代项目里混用可能触发 quirks mode 或校验警告。
- 错误写法：
<br>文本——<br>是空元素，不能闭合 - 错误嵌套：
<p><br><br></p>生成多余空白行，视觉上像段落间距，但实际没有 margin 控制力 - 不要用它替代
<p></p>分段：比如新闻正文里用多个<br>拆分段落，SEO 和语义化都会受损
后端返回带 \n 的文本，前端怎么换行？
直接把含换行符的字符串塞进 v-html 或 innerHTML 不会生效，浏览器默认忽略所有空白字符。必须配合 CSS 或预处理。
- 推荐方案：给容器加
white-space: pre-line;—— 保留源码中的\n，合并多余空格，且允许自动折行 - Vue 场景下别手动
.split('\n').map(...)插<br>，容易 XSS（除非严格转义）；用v-html+pre-line更安全简洁 - 若需兼容 IE11，
pre-wrap比pre-line兼容性更好，但会多保留空格，注意前后空格是否影响排版
长单词/URL 不换行？别只盯着 <br>
<br> 对超长无空格字符串（如 Base64、JWT、长 URL）完全无效。这类问题本质是「断词」，得靠 CSS。
- 优先用
overflow-wrap: break-word;：只在必要时切单词，保持可读性 - 慎用
word-break: break-all;：会在任意字符间断开，中文也拆字，影响阅读 - 如果容器宽度固定且内容不可控，建议组合使用：
overflow-wrap: break-word; word-break: keep-all;，兼顾英文断词与中文完整性
真正难的不是“怎么换行”，而是判断该不该换、由谁来换——<br> 是手术刀，不是胶带；CSS 的 white-space 和 overflow-wrap 才是应对真实业务文本的常规武器。别让一个换行符，悄悄毁掉响应式布局和无障碍体验。
