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