HTML默认压缩连续空白字符为单个空格，源于规范的“空白折叠”行为；可通过white-space: pre-wrap等CSS属性控制，优先于<pre>标签，但需确保换行符真实进入DOM。
HTML默认为什么吃掉回车和多个空格
浏览器渲染HTML时，会把所有连续的空白字符（包括换行、制表符、空格）压缩成一个空格，这是HTML规范定义的“空白折叠”行为。所以你在源码里写
hello\n\nworld或
hello world，最终都显示为hello world。
用white-space CSS属性控制空白处理方式
最直接有效的方法是用CSS的white-space属性，它有多个取值，常用且符合需求的是pre和pre-wrap：
-
white-space: pre：保留所有空白和换行，但不自动换行（超出容器也不折行） -
white-space: pre-wrap：保留所有空白和换行，同时支持自动折行（推荐日常使用） -
white-space: pre-line：合并空格但保留换行（适合纯文本段落，不保留多个空格）
示例：
<div style="white-space: pre-wrap;"> 这里有两个空格 这里换行了 </div>
什么时候该用<pre>标签而不是CSS
<pre>标签默认就等价于white-space: pre，但它自带一些副作用：
立即学习“前端免费学习笔记（深入）”；
- 默认使用等宽字体（如
monospace），可能破坏设计风格 - 上下边距较大，需手动重置
margin或padding - 语义上表示“预格式化文本”，如果内容不是代码或日志，语义不准确
所以除非你明确需要等宽字体+预格式化语义，否则优先用white-space: pre-wrap配合普通标签（如<div>或<p>）。
服务端或富文本场景下容易漏掉的点
如果内容来自用户输入（比如textarea提交）、Markdown解析结果或CMS后台，要注意：
- 某些编辑器或框架会自动把
\n转成<br>，此时white-space无效，得靠<br>本身生效 - 后端输出HTML前若做了
strip_tags或空格清理，再怎么设CSS也没用 - 在React/Vue中动态插入含换行的字符串时，需确保没被当作纯文本渲染（比如Vue里要用
v-html，React里用dangerouslySetInnerHTML），否则换行符仍被当作文本字符而非HTML结构
真正起作用的是“换行符是否作为真实字符进入DOM”，而不是单纯加个CSS——这点常被忽略。
