HTML中连续空格只显示一个是浏览器默认行为，源于white-space:normal的规范定义；可通过 、white-space:pre-wrap或pre标签等方案绕过压缩并保留空白。

HTML里空格不显示？这是浏览器默认行为

浏览器会把连续的空白字符（空格、制表符、换行）压缩成单个空格，再忽略首尾空白。这不是bug，是HTML规范定义的渲染逻辑。所以直接写   或用CSS控制，本质是在绕过这个默认压缩。

用 手动插入不间断空格

适用于少量、确定位置的空格需求，比如“姓名：  张三”想留两个空位。

•   是HTML实体，代表一个不可断行的空格，浏览器不会把它和其他空格合并
• 连续写多个     就能保留几个空格，但可读性差，不适合动态内容或大段文本
• 它会参与文字流布局，影响行高和换行点，嵌套在 <pre class="brush:php;toolbar:false;">&lt;/code&gt; 里也照常生效（这点和 &lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt; 自身的空格处理逻辑无关）&lt;/li&gt;&lt;/ul&gt;&lt;H3&gt;CSS的white-space属性控制整体空白处理&lt;/p&gt;&lt;p&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/skill5806&quot; title=&quot;html-deploy&quot;&gt;&lt;img src=&quot;https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg&quot; alt=&quot;html-deploy&quot; onerror=&quot;this.onerror='';this.src='/static/lhimages/moren/morentu.png'&quot; &gt;&lt;/a&gt; &lt;div class=&quot;aritcle_card_info flexColumn&quot;&gt; &lt;a href=&quot;/xiazai/skill5806&quot; title=&quot;html-deploy&quot;&gt;html-deploy&lt;/a&gt; &lt;p&gt;使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。&lt;/p&gt; &lt;/div&gt; &lt;a href=&quot;/xiazai/skill5806&quot; title=&quot;html-deploy&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;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;li&gt;注意：该样式需作用于包裹文本的容器元素（如 &lt;code&gt;<div>&lt;/code&gt; 或 &lt;code&gt;<p>&lt;/code&gt;），不能只加在纯文本节点上&lt;/li&gt;&lt;/ul&gt;&lt;H3&gt;JavaScript中处理字符串空格再塞回HTML&lt;/p&gt;&lt;p&gt;常见于后台返回带缩进的JSON、代码片段或用户富文本编辑后的内容。&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;ul&gt;&lt;li&gt;不要直接用 &lt;code&gt;.innerHTML = str&lt;/code&gt;，否则空格仍被压缩；先用 &lt;code&gt;str.replace(/\s/g, ' ')&lt;/code&gt; 全部转义（但会把换行也变成&lt;code&gt; &lt;/code&gt;，通常不是想要的）&lt;/li&gt;&lt;li&gt;更稳妥的是：用 &lt;code&gt;white-space: pre-wrap&lt;/code&gt; + &lt;code&gt;.textContent&lt;/code&gt; 设置内容，让浏览器自己按CSS规则解析原始空白&lt;/li&gt;&lt;li&gt;如果必须用 &lt;code&gt;.innerHTML&lt;/code&gt;，且需保留换行，建议配合 &lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;str.replace(/\n/g, '&lt;br&gt;').replace(/ /g, ' ')</pre> ——但要注意多次执行会重复转义，需加防护

空格显示问题从来不是孤立的，它总和内容来源（后端API、用户输入、静态HTML）、展示容器样式、是否需要复制友好等条件绑在一起。单独选一种方案容易踩坑，得先看清空格是从哪来的、要保哪些、舍哪些。