空白折叠是HTML规范定义的行为，浏览器在DOM解析阶段将文本节点内连续空白（空格、\t、\n）首尾丢弃、中间压缩为单个空格；仅、等预格式化上下文保留原始空白，该过程不可逆。
HTML里敲多个空格、换行、制表符，最终只显示一个空格——这不是bug，是规范定义的“空白折叠”行为。想控制它，得理解折叠发生的阶段和上下文，而不是靠狂敲空格或堆 。
什么是空白折叠？浏览器到底做了什么
HTML解析器在构建DOM时，对文本节点内的连续空白字符（空格、\t、\n）执行两步处理：
- 首尾空白直接丢弃
- 中间连续空白压缩为单个空格
所以<p> hello world </p>和<p>hello world</p>
<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20d3191a227.jpg" alt="DeepBI DHTML 页面生成器" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器">DeepBI DHTML 页面生成器</a>
<p>生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：
- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；
- 提及位于 `apps/console/src/featur</p>
</div>
<a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>渲染效果完全一样。但注意：这个折叠只发生在普通文本节点内，不影响<pre class="brush:php;toolbar:false;"></pre>、<script></script>、<style></style>等预格式化上下文。
<pre class="brush:php;toolbar:false;"></pre>标签为什么能保留所有空格和换行
<pre class="brush:php;toolbar:false;"></pre>不是“让空格不折叠”的开关，而是语义切换：它告诉浏览器“这段内容是预格式化的”，于是解析器跳过空白折叠，并默认应用white-space: pre CSS规则。
- 适合场景：代码块、日志输出、ASCII图、配置文件片段
- 不适合场景：仅为了给段落首行缩进、按钮文字对齐、响应式布局留空
- 长行会撑破容器？加
white-space: pre-wrap即可支持自动换行 - SEO和读屏器会照读所有空格换行，含敏感信息（如密钥缩进）要谨慎
两个<span></span>之间为啥多出一个空隙
这不是“空格”，而是标签间换行/缩进产生的文本节点，被折叠后仍保留一个空格。这个空格的视觉宽度由父元素的font-size决定。
- 常见现象：
<span>A</span>\n<span>B</span>渲染出A和B之间有间隙 - 错误解法：用
<span>A</span><span>B</span>硬写在一行（牺牲可读性） - 合理解法：
- 父容器设
font-size: 0，子元素单独设font-size - 用
display: flex或float消除间隙 - 用
letter-spacing或margin替代空白做间距控制
- 父容器设
该用在哪儿，不该用在哪儿
是不换行空格（non-breaking space），语义是“此处必须有一个空格，且前后文字不能断行”，不是“多加几个空格”的快捷键。
- 合适场景：
Mr. Smith（防止姓和名被折到两行）、¥ 100（防止货币符号与数字断开）、表格空单元格占位<td> </td> - 不合适场景：用十几个
- 兼容性坑：
- 复制粘贴风险：混入零宽字符（如
）会导致空格“看起来存在却不可见”
真正难处理的从来不是“怎么让空格显示出来”，而是“怎么让开发者意识到：空格是内容语义的一部分，而间距是样式职责——把它们混在一起，问题只会从HTML蔓延到CSS再到JS。”
