浏览器默认合并连续空格是html规范的空白折叠行为；真正保留连续空格需用、white-space: pre-wrap或 / / 等方案。

为什么直接敲空格没用

浏览器默认会把连续多个  、普通空格、制表符或换行符全部合并成一个空格，这是 HTML 规范行为，不是 bug。你看到的“敲了 5 个空格只显示 1 个”，本质是渲染引擎在解析时做了空白折叠（whitespace collapsing）。

  适合防断行，不是为“多空格”而生

用   确实能插入一个不可折叠、不可换行的空格，但它解决的是语义问题，比如 10 kg 防止数字和单位被拆到两行。如果你硬要靠堆     实现缩进或对齐：

• 可读性差，      和   在编辑器里几乎看不出区别
• 无法控制宽度，所有   都是等宽（通常 ≈ 1 字符），没法做「半个汉字」或「两个汉字」的空隙
• 在 textarea 或表单提交时，  会被当成普通空格处理，后端可能收不到预期值

真正保留连续空格的三种可靠方式

按场景选，别混用：

Wechat HTML Publisher

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

下载

• 展示代码、日志、ASCII 图：用 <pre class="brush:php;toolbar:false;"></pre> 标签，它原样保留所有空格、制表符、换行，且默认等宽字体
  示例：<pre class="brush:php;toolbar:false;"> hello world</pre>
• 段落内局部保留空格（如对齐字段名）：用 CSS 的 white-space: pre-wrap
  示例：<p style="white-space: pre-wrap">姓名：   张三</p> —— 注意这里仍可用  ，但主要靠 pre-wrap 让普通空格不被折叠
• 需要更精细宽度控制（如中文排版缩进）：用  （半个汉字宽）、 （一个汉字宽）
  示例：标题： 正文内容，比堆   更语义清晰

white-space 各值的实际表现差异

别只记名字，看效果再选：

• white-space: pre：空格和换行全保留，但超长不换行 → 容易撑破容器，需配合 overflow: auto
• white-space: pre-wrap：保留空格和换行，且自动折行 → 日常最安全的选择
• white-space: pre-line：换行生效，但连续空格仍被合并 → 类似普通段落加了手动换行，不适合“多空格”需求
• white-space: normal：默认行为，空格全折叠 → 别指望它保留什么

容易忽略的一点：这些样式对内联元素（比如 <span></span>）也生效，但若父容器是 display: inline，子元素设 pre-wrap 可能导致意外换行，建议统一在块级容器上设置。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！