HTML中空格被合并是因默认white-space: normal主动折叠空白符，并非bug；应通过white-space属性（如pre-wrap）控制，而非滥用 或冗余空格。

HTML中空格为什么“不显示”或“被合并”

浏览器默认会把连续的空白字符（空格、制表符、换行）压缩成单个空格，这是 HTML 规范定义的 white-space 行为。所以你在源码里写 10 个空格、或换行缩进，最终渲染几乎都只显示一个空格——这不是 bug，是预期行为。

常见错误现象：  用得泛滥；手动加多个   模拟缩进；在 <pre class="brush:php;toolbar:false;">&lt;/code&gt; 外用回车指望保留格式；CSS 未显式设置 &lt;code&gt;white-space&lt;/code&gt; 就以为“源码怎么写就怎么显示”。&lt;/p&gt; &lt;ul&gt; &lt;li&gt;使用场景：排版文案中的缩进、代码片段对齐、诗歌/地址等需保留空格结构的内容&lt;/li&gt; &lt;li&gt;根本原因不是“HTML 不支持空格”，而是默认 &lt;code&gt;white-space: normal&lt;/code&gt; 主动折叠&lt;/li&gt; &lt;li&gt;不要靠反复敲空格或 &lt;code&gt; &lt;/code&gt; 堆砌来控制布局——语义错、可维护性差、响应式下易崩&lt;/li&gt; &lt;/ul&gt; &lt;H3&gt;用 &lt;code&gt;white-space&lt;/code&gt; 控制空格渲染行为&lt;/H3&gt; &lt;p&gt;这是最直接、语义清晰的方案。CSS 的 &lt;code&gt;white-space&lt;/code&gt; 属性决定如何处理空白符和换行：&lt;/p&gt; &lt;ul&gt; &lt;li&gt;&lt;code&gt;white-space: pre&lt;/code&gt;：保留所有空白和换行，但不自动换行（类似 &lt;code&gt;<pre>&lt;/code&gt;）&lt;/li&gt; &lt;li&gt;&lt;code&gt;white-space: pre-wrap&lt;/code&gt;：保留空白和换行，且允许自动换行（最常用，兼顾可读性与排版）&lt;/li&gt; &lt;li&gt;&lt;code&gt;white-space: pre-line&lt;/code&gt;：合并连续空格，但保留换行符（适合纯文本段落，如用户评论）&lt;/li&gt; &lt;li&gt;避免用 &lt;code&gt;white-space: nowrap&lt;/code&gt; 处理空格问题——它只禁换行，不解决空格折叠&lt;/li&gt; &lt;/ul&gt; &lt;p&gt;示例：&lt;pre class='brush:php;toolbar:false;'&gt;<p style=&quot;white-space: pre-wrap&quot;> 这里有两个前导空格 换行后还有缩进</p></pre> 渲染时会真实保留缩进与换行。

  和  /  的适用边界

  是非断行空格，只在需要“此处必须有且仅有一个不可折叠空格”时才用，比如“第 1 章”防断行。但它不是排版工具：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

立即学习“前端免费学习笔记（深入）”；

•   无法响应式缩放，固定为字体的 1/2 em 宽度
•   ≈ 2 字符宽，  ≈ 4 字符宽，但兼容性略差（IE9+ 支持），且仍属“字符级 hack”
• 绝对不要用   实现段落首行缩进——该用 text-indent；不要用它对齐表格内文字——该用 text-align 或 flex
• 如果编辑器输出大量  （如富文本粘贴），说明后端或编辑器配置没过滤冗余空格，应从输入源头清理

富文本编辑器中空格内容的落地处理

像 Quill、TinyMCE、CKEditor 默认会把用户敲的空格转成   或直接删掉多余空格，导致复制粘贴后格式丢失：

• 前端展示时，建议统一用 white-space: pre-wrap 包裹富文本容器，比逐个替换   更可靠
• 服务端存储前，可正则清理无意义空格：text.replace(/ /g, ' ').replace(/\s+/g, ' ').trim()（注意别误杀 <pre> 内容）
• 若需保留原始空格结构（如代码块），应识别 <pre> / <code> 标签并跳过标准化处理
• 编辑器配置项如 quill.format('indent', 2) 比手动敲空格更可控，也便于后续样式统一

真正难的不是“怎么让空格显示”，而是判断哪些空格该保留、哪些该归一化——这取决于内容类型：代码要原样，新闻稿要干净，诗歌要精确。别让空格问题掩盖了语义建模本身。