HTML / 使用 NBSP 和 white-space 插入连续空格

在 HTML 中显示多个空格，请使用   处理少量连续空格，或使用 CSS white-space: pre-wrap 来保留文本中的空格和换行。请谨慎选择：  也会在该位置阻止普通换行。对于按钮或导航项之间的间距，请使用 CSS gap 或 margin。

为什么连续空格看起来只有一个

在通常的 white-space: normal 设置下，单词之间连续的普通空格和制表符在显示时会被折叠。HTML 源代码中的缩进和换行并不直接定义可见的间距。源代码中的换行并不总是会变成一个可见的空格：它的处理方式可能取决于语言和上下文。

将此完整示例粘贴到文本编辑器中，保存为 spaces.html 并使用 UTF-8 编码，然后在浏览器中打开该文件。无需任何库或服务器。编辑后，保存并刷新浏览器。示例单词使用拉丁字母，因此差异易于比较。

<!doctype html>
<html lang="zh">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML 空白比较</title>
  <style>
    body { font-family: sans-serif; max-width: 42rem; margin: 1rem auto; padding: 0 1rem; }
    .sample { border: 1px solid #777; padding: .5rem; max-width: 18rem; }
    .preserve { white-space: pre-wrap; }
    .keep { white-space: pre; overflow-x: auto; }
    .lines { white-space: pre-line; }
    .actions { display: flex; flex-wrap: wrap; gap: 1rem; }
  </style>
</head>
<body>
  <h1>HTML 空白比较</h1>
  <h2>normal</h2>
  <p class="sample">Alpha   Beta       Gamma</p>
  <h2>&amp;nbsp;</h2>
  <p class="sample">Alpha&nbsp;&nbsp;&nbsp;Beta</p>
  <p class="sample">10&nbsp;kg</p>
  <h2>pre-wrap</h2>
  <p class="sample preserve">Alpha   Beta
Gamma   Delta   Epsilon   Zeta   Eta   Theta   Iota</p>
  <h2>pre</h2>
  <p class="sample keep">Alpha   Beta
Gamma   Delta   Epsilon   Zeta   Eta   Theta   Iota</p>
  <h2>pre-line</h2>
  <p class="sample lines">Alpha   Beta
Gamma   Delta   Epsilon   Zeta   Eta   Theta   Iota</p>
  <h2>gap</h2>
  <div class="actions"><button type="button">A</button><button type="button">B</button></div>
</body>
</html>

在 normal 段落中，源代码在 Alpha、Beta 和 Gamma 之间包含三个空格然后是七个空格，但每个序列通常显示为一个空格。使用开发者工具选择该段落并检查其计算后的 white-space 值。这可以区分源代码中的字符与渲染时的空白折叠。

插入不换行空格字符

  是不换行空格 U+00A0（non-breaking space，简称 NBSP） 的 HTML 字符引用。写三次会插入三个不会像连续普通空格那样折叠的字符。它还可以将数字和单位保持在一起。

<p>Alpha&nbsp;&nbsp;&nbsp;Beta</p>
<p>10&nbsp;kg</p>

第一段在 Alpha 和 Beta 之间放置了三个不换行空格。在第二段中，10 kg 防止数字和单位之间的普通换行。实际宽度取决于字体和字体大小；三个空格在像素上没有固定宽度。

用许多不换行空格连接整句话会减少换行的机会，并可能在窄屏上导致溢出。复制的文本还包含与普通空格 U+0020 不同的字符，这可能会影响搜索和字符串比较。避免重复使用这些字符来对齐内容或创建缩进。

使用 white-space 保留空格和换行

当重复的空格和明确的换行符是文本的重要部分时，将 white-space: pre-wrap 应用于该元素。它会保留空格和显式换行，并允许根据可用宽度自动换行。但这并不保证没有空格的长 URL 或长单词一定能完整放入容器内。

在完整示例中，pre-wrap 和 pre 都保留了 Alpha 和 Beta 之间的三个空格以及 Gamma 之前的换行符。缩小窗口：pre-wrap 允许额外换行，而 pre 不允许。示例使用 overflow-x: auto 使后者可以水平滚动。使用 pre-line，明确的换行符保持不变，但单词之间的连续空格会折叠。

本表总结了常见的文本处理差异。这并不意味着制表符宽度或行尾空格等细节行为完全相同。还要检查继承值和其他 CSS 规则。W3C 对 white-space 的定义

使用 CSS 设置元素之间的间距

要设置两个按钮之间的距离，可将它们的父元素设为 Flexbox 容器并设置 gap，而不是添加空格字符。使用 margin 设置元素外部的间距，使用 padding 设置边框与内容之间的内边距。空格字符属于文本内容，CSS 间距用于控制布局。

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

在完整示例中，A 和 B 按钮通过 gap: 1rem 分开。rem 单位以根元素的字体大小为基准，因此它不总是 16 像素。如果宽度不足，flex-wrap: wrap 会让按钮移到下一行。在保持其他内容不变的情况下，仅将 gap 设置为 0，对比结果，然后恢复 1rem。

显示结果不同时应检查什么

1. 如果出现文字  ，请检查您是否在编辑 HTML。在可视化编辑器中以文本方式粘贴它，或将其转义两次为  ，会阻止它变成空格。
2. 如果空格或换行消失，请检查段落的计算后 white-space 值，并确认 CSS 选择器匹配。pre-wrap 元素内部的源代码缩进也可能变得可见，因此请移除不必要的空白。
3. 如果内容在移动端溢出，请缩小窗口并查看是否有重复的不换行空格或 pre 设置。根据用途，将它们替换为普通空格或使用 pre-wrap。更改后，在较宽的窗口宽度下再次检查。

要在解释中显示字面文本  ，而不是插入空格，请在 HTML 源代码中写入  。标准列出了字符引用及其对应的字符。WHATWG HTML 字符引用列表