HTML默认压缩连续空格，需用 、white-space CSS或标签干预； 适合少量空格，white-space:pre-wrap最常用，适合预格式化内容，注意语义与兼容性。

HTML 默认会把多个连续空格压缩成一个，这是规范行为，不是 bug。要显示多个空格，必须用语义或格式化手段主动干预。

用   手动插入不间断空格

这是最直接、兼容性最好的方式，适合少量、确定数量的空格场景。

•   是 HTML 实体，代表“non-breaking space”，浏览器不会合并它，也不会在行尾换行
• 写 4 个空格就写     ，注意中间不能换行或加空格，否则空格本身会被压缩
• 不适合动态内容或大量空格——可读性差、维护成本高、容易数错
• 在 Vue/React 等框架中，  需写成 {'\u00A0'.repeat(4)} 或用 whiteSpace: 'pre' 更稳妥

用 white-space CSS 控制空白符渲染行为

这是更现代、更灵活的方式，尤其适合含空格的文本块（如代码片段、对齐文本、日志输出）。

• white-space: pre：保留所有空白符（空格、换行、制表符），但不自动换行
• white-space: pre-wrap：保留空白符，且允许自动换行（最常用）
• white-space: pre-line：合并连续空格，但保留换行符（类似普通段落）
• 需作用于有文本内容的容器元素，例如：

  <div style="white-space: pre-wrap">hello    world</div>

• 注意：该样式会影响换行逻辑，若容器宽度受限又用了 pre，文字可能溢出而不可见

用 <pre class="brush:php;toolbar:false;">&lt;/code&gt; 标签包裹文本&lt;/H3&gt; &lt;p&gt;&lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt; 是语义化标签，内置 &lt;code&gt;white-space: pre&lt;/code&gt;，适合展示预格式化内容（如代码、ASCII 图）。&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/gongju/2905&quot; title=&quot;CSS&quot;&gt;&lt;img src=&quot;https://img.php.cn/upload/manual/000/969/633/6af2b1226ad9e733.png&quot; alt=&quot;CSS&quot; &gt;&lt;/a&gt; &lt;div class=&quot;aritcle_card_info flexColumn&quot;&gt; &lt;a href=&quot;/xiazai/gongju/2905&quot; title=&quot;CSS&quot;&gt;CSS&lt;/a&gt; &lt;p&gt;CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。&lt;/p&gt; &lt;/div&gt; &lt;a href=&quot;/xiazai/gongju/2905&quot; title=&quot;CSS&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;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;默认等宽字体 + 保留所有空白和换行，无需额外 CSS&lt;/li&gt; &lt;li&gt;缺点是样式较重，可能破坏排版节奏；若只是想多空几个格，用它显得过重&lt;/li&gt; &lt;li&gt;可配合 CSS 覆盖字体：&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot; style=&quot;font-family: -apple-system, BlinkMacSystemFont, sans-serif;&quot;&gt;key: value</pre> <li>不要嵌套 <code><pre class="brush:php;toolbar:false;"></pre> 在 <p></p> 内部——HTML 规范不允许，部分浏览器会自动闭合导致结构错乱

常见错误与陷阱

很多“空格没显示”问题其实不是空格本身的问题，而是上下文干扰导致的视觉误判。

• 在 <textarea></textarea> 或 contenteditable 元素中输入的多个空格，提交后可能被后端 trim 掉——检查服务端逻辑，不是前端没生效
• 使用 innerText 读取含   的文本时，会返回普通空格；要用 innerHTML 或 textContent 才能拿到原始实体
• Chrome 开发者工具的 Elements 面板里，  显示为小圆点或空白，但鼠标选中时能看到长度——别光看面板，用 console.log(el.innerHTML) 确认
• 用 JS 拼接字符串时写 "a" + " " + " " + "b"，结果仍是 "a b"（两个空格），但渲染出来还是一个——关键不在 JS，而在 HTML 渲染阶段是否保留

真正需要“多个空格”的场景其实不多：对齐字段、模拟终端输出、展示代码缩进、排版 ASCII 表格。多数所谓“空格不够”其实是设计需求没理清——比如用 text-align: right 或 flex justify-content: space-between 往往比硬塞空格更可靠。