纳尼？HTML 会吞掉多余的空格？

是的，HTML 渲染时会默认合并连续的多余空格。 今天在开发一些新页面的时候，在写原生html的时候，发现一些布局和想象的不一样，在一些文字之间的空格被默认奇妙的去掉了。

在HTML中，连续的空白字符，比如空格、制表符、换行符等，通常会被浏览器合并成一个空格。这可能是因为HTML的设计初衷是关注内容结构，而不是精确的排版，所以默认情况下会忽略多余的空白。

以下是关键点说明：

---

1. 默认行为

• 连续空格合并：HTML 解析器会将多个连续的空格、制表符（\t）、换行符（\n）等视为单个空格。

• 示例：

<p>Hello    World</p>

渲染结果会显示为 Hello World（中间仅一个空格）。

---

2. 特殊情况

• <pre> 标签：

如果使用 <pre> 标签包裹内容，浏览器会保留原始空格和换行格式。

<pre>Hello    World</pre>

渲染结果会保留全部空格：Hello World。

• white-space CSS 属性：

可以通过 CSS 控制空格处理方式：

.preserve-spaces {
  white-space: pre; /* 保留所有空格和换行 */
}

<p class="preserve-spaces">Hello    World</p>

---

3. 强制保留空格

•   实体：

使用非换行空格实体（ ）可以强制保留单个空格：

<p>Hello&nbsp;&nbsp;&nbsp;World</p>

渲染结果为 Hello World（中间三个空格）。

---

4. 文本中的换行

• HTML 会忽略文本中的换行符（除非在 <pre> 或通过 CSS 控制）：

<p>
  这是第一行
  这是第二行
</p>

渲染结果为单行：这是第一行 这是第二行。

---

总结

场景	行为	解决方案
普通文本	合并连续空格	使用  
保留原始格式	需用 <pre> 或 CSS	white-space: pre
精确控制布局	不依赖空格	使用 Flexbox/Grid 布局

所以，实际开发中，建议通过 CSS 或语义化标签（如 <pre>）控制空格，而非依赖 HTML 默认行为。