<br>仅在浏览器允许换行的上下文中生效，受white-space: nowrap、flex容器无wrap及inline元素样式压制；它属HTML结构层指令，与CSS层white-space: pre-line用途不同，适用于固定结构文本而非用户输入或响应式场景。
<br> 不是万能换行开关，它只在「浏览器允许换行的上下文中」才起作用。直接写却没反应，大概率是父容器压制了换行行为。
为什么 <br> 有时完全不生效
根本原因不是标签写错了，而是它被 CSS 拦住了：
- 父元素设了
white-space: nowrap—— 浏览器连空格都吞掉，<br>自然失效 - 父容器是
display: flex且未声明flex-wrap: wrap—— 子项强制单行排列，<br>对布局无影响 - 文本包裹在
<span>或<strong>这类 inline 元素里，又被设了display: inline-block+white-space: nowrap—— 双重压制
实操建议：打开开发者工具，检查目标元素的 computed white-space 和 display 值。只要看到 nowrap 或 flex 且无 wrap，就别指望 <br> 能起效。
<br> 和 white-space: pre-line 到底谁该用
它们不是替代关系，是不同层级的控制手段：
-
<br>是 HTML 结构层指令：你明确告诉浏览器“这里必须断”，不依赖样式，也不响应容器宽度变化 -
white-space: pre-line是 CSS 渲染层规则：它让源码里的\n字符变成可见换行，但前提是文本本身含换行符
典型翻车场景：
后端返回字符串 "第一行第二行"（中间没 \n），你却给容器加 white-space: pre-line —— 没用，因为没换行符可解析；
反过来，字符串是 "第一行\n第二行"，你还硬塞一堆 <br> —— 冗余，还可能因框架（如 Vue/JSX）解析异常导致 XSS 风险或渲染错乱。
React/Vue 里写 <br> 的实际写法
不能当字符串随便插，框架会原样输出：
- React JSX 中：
{"第一行"}<br />{"第二行"}是合法的；但{"第一行<br />第二行"}会被当纯文本，<br>不解析 - Vue 模板中：直接写
第一行<br />第二行
没问题；但若内容来自变量，别用v-html渲染用户输入，优先用white-space: pre-line+ 后端清洗\n - 动态控制是否换行：抽成组件，用条件表达式决定是否插入
<br>，比如{showBreak && <br />}
真正难的不是怎么换行，而是判断该不该用 <br>
它只适合「换行即内容」的固定结构：地址、诗歌、签名档、表格内多行短文本。一旦涉及用户输入、富文本、响应式宽度变化，<br> 就成了语义污染源——屏幕阅读器跳过、打印错位、SEO 崩坏、移动端错行。这时候，white-space: pre-line 配合 overflow-wrap: break-word 才是日常主力。容易被忽略的是：后端返回的 \n 必须干净，不能混着 \r\n 或多余空行，否则前端样式再准也白搭。
