br仅在换行本身承载语义时合法，如地址块、诗歌断句、表单label后紧邻说明；在white-space:nowrap、flex无wrap、inline元素加nowrap等CSS环境下失效；React/Vue中需避免XSS，富文本应优先用CSS处理换行。
br 标签只在“换行即内容”时才合法，其余情况基本是 CSS 或语义结构的问题。
什么时候必须用 br？
它不是“换行工具”，而是“内容结构标记”——仅当换行本身构成语义信息时才存在意义：
- 地址块中连续物理行（如
<p>上海市浦东新区世纪大道100号<br>邮编：200120</p>），拆开就失去地理层级关系 - 诗歌或歌词原文断句（
<p>床前明月光<br>疑是地上霜</p>），改用<p>会割裂韵律单位 - 表单
<label>后紧跟简短说明，且需视觉紧邻但非同一可聚焦项（更推荐display: block，但老系统兼容时br是最小侵入方案）
br 在哪些 CSS 环境下完全失效？
它不抵抗样式压制，一旦父容器禁用换行能力，br 就变成透明标签：
- 父元素设了
white-space: nowrap—— 浏览器连空格都吞掉，br自然被忽略 - 容器是
display: flex且未声明flex-wrap: wrap—— 子项强制单行，br对布局无影响 - 文本被包裹在
<strong>等 inline 元素里，又额外加了white-space: nowrap—— 双重封锁
实操建议：打开开发者工具，检查目标元素的 computed white-space 和 display 值。看到 nowrap 或 flex 无 wrap，就别指望 br 起效。
立即学习“前端免费学习笔记（深入）”；
React/Vue 中动态插入 br 的安全写法
框架不会自动解析字符串里的 <br>，直接拼接容易出错或引发 XSS：
- React JSX 中应写成
{"第一行"}<br />{"第二行"}，而非{"第一行<br>第二行"} - Vue 模板中直接写
第一行<br>第二行可行，但若内容来自变量，绝不用v-html渲染用户输入 - 后端返回含
\n的文本时，优先用white-space: pre-line+overflow-wrap: break-word，而不是前端硬插br
怎么批量清理无效的 br？
肉眼无法判断哪些 br 是冗余的，尤其富文本粘贴后常带一堆孤立换行：
- 先禁用所有 CSS，看原始结构：真正影响语义的
br应有前后文本节点；开头/结尾/紧邻<p>或<div>的基本可删 - 执行脚本快速干掉孤立
br：document.querySelectorAll('br').forEach(br => { if (!br.previousElementSibling && !br.nextElementSibling) br.remove(); }) - 特别注意
<pre>或white-space: pre环境里，br和源码换行符效果重叠，极易多出空行
复杂点在于：它看起来最简单，但一旦混进富文本、国际化、无障碍链条里，就不再是“换行”这么轻量的事。
