HTML换行问题根源在于空白符处理规则和块/内联元素默认行为：br在white-space:nowrap下失效；p/div不换行多因CSS覆盖display或启用flex/grid布局；保留原格式应优先用pre或white-space:pre-wrap。
HTML 里写文本，<br> 不起作用、空格被合并、<p></p> 套着却还挤在一行——根本不是“语法错了”，而是没理解 HTML 的**空白符处理规则**和**块/内联元素默认行为**。
为什么 <br> 看起来没换行？
常见于以下场景：
- 把
<br>写在<pre class="brush:php;toolbar:false;"></pre>或<code>外部，但父容器用了white-space: nowrap（比如某些 CSS 框架的表格单元格、按钮内） - 误写成
<br>却放在 XML/XHTML 模式下渲染，而页面实际是 HTML5 文档（其实 HTML5 中<br>和<br>都合法，但部分旧版解析器或编辑器会报错或忽略） -
<br>后紧跟一个<div> 或其他块级元素，视觉上“换行”被掩盖，实际它已生效——用开发者工具检查元素高度可验证 <h3> <code><p></p>和<div> 为啥不换行？ <p>它们本就会换行，但前提是：内容没被 CSS 强制压成一行。典型干扰项：</p> <ul> <li> <code>display: inline或display: inline-block覆盖了默认display: block - 父容器设置了
flex或grid布局，子元素自动变成 flex item / grid item，不再遵守块级换行逻辑 - 元素本身有
float: left且未清除浮动，导致后续内容“绕行”而非换行
验证方法：临时加一句 style="border: 1px solid red;"，看边框是否独占一行。
立即学习“前端免费学习笔记（深入）”；
想保留原始换行和空格，该用哪个标签？
别硬套 <br> 或反复敲空格，直接用语义正确的容器：
- 纯文本段落含手动换行 → 用
<pre class="brush:php;toolbar:false;"></pre>，它默认启用white-space: pre，保留所有空白与换行 - 代码片段 →
<pre class="brush:php;toolbar:false;"><code></code> 组合，既保留格式又带语法语义</pre> - 普通段落中偶尔需保留空格 → 用
white-space: pre-wrap
注意：<pre class="brush:php;toolbar:false;"></pre> 默认等宽字体且无 margin，若要匹配正文样式，得额外重置 font-family 和 margin。
CSS white-space 值怎么选？
这是控制换行和空格最底层的开关，关键取值含义：
-
normal（默认）：合并空白，换行靠内容撑开或<br> -
nowrap：强制单行，忽略所有换行符和<br> -
pre：完全保留源码空格与换行，不自动折行 -
pre-wrap：保留空格与换行，但允许长单词内折行 —— 多数场景最实用 -
pre-line：合并空格，但保留换行符（类似把多个空格当一个，但\n仍生效）
例如后台返回一段带 \n 的用户评论，前端想原样展示，直接给容器加 style="white-space: pre-wrap;" 就行，不用遍历替换 \n 为 <br>。
真正卡住人的，往往不是不会写 <br>，而是没意识到浏览器先按 CSS 规则解析布局，再按 HTML 结构渲染——换行问题，八成出在 CSS 层级覆盖或 display 模式变更上。
