HTML中连续空格被压缩为一个空格是规范规定的空白折叠行为；可用 实体、标签或white-space CSS属性（如pre-wrap）解决。

HTML里空格被合并是默认行为

浏览器渲染HTML时，会把连续的空白字符（空格、制表符、换行）压缩成单个空格，这是HTML规范定义的“空白折叠”规则。所以写   或直接敲多个空格，页面上都只显示一个空格。

用 手动替换空格最直接

适用于少量、固定位置的空格保留，比如缩进、对齐字段名等场景。每个 会被当作一个不可断行的空格渲染：

<p>姓名：<span>    </span>张三</p>

•  是HTML实体，不是空格字符，不会被折叠
• 不能用在<pre class="brush:php;toolbar:false;">&lt;/code&gt;外的纯文本中自动生效——必须显式写出&lt;/li&gt; &lt;li&gt;大量空格时写起来累，也不利于维护和国际化&lt;/li&gt; &lt;/ul&gt; &lt;H3&gt;用&lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt;标签包裹适合整段保留格式&lt;/p&gt; &lt;p&gt;&lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt;会禁用空白折叠，并保留换行和空格，常用于代码块、日志、ASCII图等：&lt;/p&gt;&lt;p&gt;&lt;span&gt;立即学习&lt;/span&gt;“&lt;a href=&quot;https://pan.quark.cn/s/cb6835dc7db1&quot; style=&quot;text-decoration: underline !important; color: blue; font-weight: bolder;&quot; rel=&quot;nofollow&quot; target=&quot;_blank&quot;&gt;前端免费学习笔记（深入）&lt;/a&gt;”；&lt;/p&gt;&lt;div class=&quot;aritcle_card flexRow&quot;&gt; &lt;div class=&quot;artcardd flexRow&quot;&gt; &lt;a class=&quot;aritcle_card_img&quot; href=&quot;/xiazai/skill12116&quot; title=&quot;DeepBI DHTML 页面生成器&quot;&gt;&lt;img src=&quot;https://img.php.cn/upload/skill/001/246/273/6adaf20d3191a227.jpg&quot; alt=&quot;DeepBI DHTML 页面生成器&quot; &gt;&lt;/a&gt; &lt;div class=&quot;aritcle_card_info flexColumn&quot;&gt; &lt;a href=&quot;/xiazai/skill12116&quot; title=&quot;DeepBI DHTML 页面生成器&quot;&gt;DeepBI DHTML 页面生成器&lt;/a&gt; &lt;p&gt;生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur&lt;/p&gt; &lt;/div&gt; &lt;a href=&quot;/xiazai/skill12116&quot; title=&quot;DeepBI DHTML 页面生成器&quot; class=&quot;aritcle_card_btn flexRow flexcenter&quot;&gt;&lt;b&gt;&lt;/b&gt;&lt;span&gt;下载&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt; key: value list: [a, b, c]</pre> <ul> <li>注意：默认使用等宽字体，且有上下外边距，可能影响排版</li> <li>可通过CSS重置：<code>pre { font-family: inherit; margin: 0; white-space: pre; }
• white-space: pre也能达到类似效果，但<pre class="brush:php;toolbar:false;">&lt;/code&gt;语义更明确&lt;/li&gt; &lt;/ul&gt; &lt;H3&gt;&lt;code&gt;white-space&lt;/code&gt; CSS属性最灵活&lt;/p&gt; &lt;p&gt;这是控制空白处理的核心方案，支持多种值，常用组合：&lt;/p&gt; &lt;ul&gt; &lt;li&gt;&lt;code&gt;white-space: 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;：合并空格，但保留换行（适合带换行但不care空格数的场景）&lt;/li&gt; &lt;/ul&gt; &lt;p&gt;用法示例：&lt;/p&gt; &lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;p style=&quot;white-space: pre-wrap&quot;&gt; 这里 有 多个 空格&lt;/p&gt;</pre> <p>注意：<code>white-space对内联元素（如<span></span>）也有效，但需确保它不是被父元素的white-space覆盖。

  真正容易被忽略的是继承关系——父容器设了white-space: nowrap，子元素即使写了pre-wrap也可能失效；调试时建议直接在目标元素上检查计算后的white-space值。