br标签仅在语义同一段落内需强制固定断行时使用，如地址、古诗、签名档；滥用会导致可访问性与响应式问题；其生效依赖white-space和display的CSS支持。
br 标签不是“按回车就换行”的快捷键，它只在语义合理、CSS 环境允许的场景下才真正起作用；滥用它会导致屏幕阅读器误读、打印错位、响应式布局崩坏。
什么时候必须用 br，而不是 p 或 CSS？
它只解决一个具体问题：同一语义段落内，必须保留某处人工指定的断行位置，且该位置不可被响应式或字体变化影响。
- 地址块：
<p>上海市浦东新区张江路123号<br>邮编:200120</p>——两行属于同一地址实体 - 古诗原文：
<p>明月松间照<br>清泉石上流</p>——删掉就破坏诗句结构 - 签名档：
<p>张三<br>前端工程师<br>2024年7月</p> - 表格单元格内多行短文本（如操作说明）
别用它分隔新闻摘要、表单提示、按钮文字——这些本该是独立语义单元，应拆成多个 p 或用 display: block 控制。
br 不生效？先看父容器的 white-space 和 display
它不生效的根本原因不是标签写错了，而是被 CSS 拦住了。
立即学习“前端免费学习笔记（深入）”；
- 父元素设了
white-space: nowrap——浏览器连空格都吞掉，br自然失效 - 父容器是
display: flex且未声明flex-wrap: wrap——子项强制单行，br对布局无影响 - 文本包裹在
<strong>里，又被设了display: inline-block+white-space: nowrap——双重压制
实操建议：打开开发者工具，检查目标元素的 computed white-space 和 display。只要看到 nowrap 或 flex 且无 wrap，就别指望 br 能起效。
React / Vue 中动态插入 br 的安全写法
框架不会把字符串里的 <br> 当作标签解析，直接拼接容易引入 XSS 或渲染异常。
- React JSX 中：
{"第一行"}<br />{"第二行"}是合法的；但{"第一行 第二行"}会被当纯文本，不解析换行 - Vue 模板中：直接写
第一行<br>第二行没问题；若内容来自变量，别用v-html渲染用户输入，优先用white-space: pre-line+ 后端清洗 - 动态控制是否换行：抽成组件，用条件表达式决定是否插入，比如
{showBreak && <br />}
别手动 .split('
').map() 拼 DOM——易引入 XSS，绕过框架响应式机制。
后端返回带
的字符串，前端怎么让换行生效？
直接塞进 innerHTML 或 v-html 不会显示换行——HTML 默认合并所有空白符，
被当普通空格处理。
- 确保字符串里真有
\n） - 给容器加
white-space: pre-line，它会让源码里的 - 禁用
<pre>包普通文本——等宽字体 + 无法自动折行，排版失控 - IE11 兼容可选，但会保留前后空格，可能多出空白
真正难的不是“怎么加”，而是判断“这里该不该由 HTML 控制换行”。br 像一把手术刀，只切固定结构；其余所有动态、响应式、用户输入的换行需求，都该交给 CSS 处理。
