仅在浏览器允许换行的上下文中生效，受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></span> 或 <strong></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 字符变成可见换行，但前提是文本本身含换行符

典型翻车场景：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

后端返回字符串 "第一行第二行"（中间没 \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 或多余空行，否则前端样式再准也白搭。