仅适用于地址、诗歌等天然需逐行对齐的固定结构文本；其余场景应优先用white-space: pre-line或overflow-wrap: break-word控制换行。
<br> 是唯一能在 HTML 文本流中插入单次换行的原生方式，但它不是“换行通用解”——用错地方会破坏语义、被屏幕阅读器跳过、甚至在响应式下错位。
什么时候必须用 <br>？
只适用于「换行即内容」的固定结构文本，比如地址、诗歌、签名档这类天然需要逐行对齐、且逻辑上属于同一段的内容。
- ✅ 正确：
<p>北京市朝阳区建国路8号SOHO现代城A座1208室<br>邮编:100022</p> - ❌ 错误：
<h2>标题<br><br>副标题</h2>——<h2></h2>不是文本容器，加<br>会导致焦点顺序混乱、打印异常 - ❌ 错误：
<p>新闻第一段<br>新闻第二段</p>—— 这该用两个<p></p>，否则 SEO 和语义化全崩
后端返回带 \n 的字符串，前端怎么让换行生效？
直接塞进 v-html 或 innerHTML 不会显示换行，浏览器默认忽略所有空白字符。别手动 .split('\n').map() 拼 <br>，XSS 风险高，也绕过 Vue 的响应式更新。
- ✅ 推荐：给容器加
white-space: pre-line;—— 保留源码中的\n，合并多余空格，还允许自动折行 - ⚠️ 兼容 IE11？用
white-space: pre-wrap;，但注意前后空格会被保留，可能多出空白 - ❌ 别用
<pre class="brush:php;toolbar:false;"></pre>包裹普通文本 —— 等宽字体 + 无法折行，破坏排版一致性
<br> 和 white-space 的本质区别是什么？
<br> 是结构性换行：你在 HTML 里写死一个断点，它不依赖样式，也不响应容器宽度变化；white-space 是渲染规则：告诉浏览器怎么解释源码里的空白和换行符，属于表现层控制。
- 固定格式（如用户填写的地址）→ 用
<br>显式标记 - 富文本或用户输入（如评论、后台编辑器输出）→ 用
white-space: pre-line+ 后端清洗\n - 超长无空格字符串（JWT、Base64、URL）→
<br>完全无效，得靠overflow-wrap: break-word;
真正难的不是“怎么换行”，而是判断该不该由 HTML 控制换行——<br> 是手术刀，只切该切的地方；其余大部分情况，white-space 和 overflow-wrap 才是日常可用的常规武器。
