如何在HTML中在文本之间添加空格？

Question

如何在HTML中在文本之间添加空格？例如：

<p>a b       c</p>

你需要在b和c之间添加空格。

- weather api

---

  might be what you're looking for. Or you can wrap a letter in a <span> tag and apply margin or padding. Like <p>a <span style="margin: 0 10px">b</span> c</p> - Michael Coker

可能是 如何在HTML中创建小空格？ 的重复问题。 - Jordan Running

Answer 1

尝试使用值为pre的 white-space 。

pre会保留空白字符序列，只有在源代码中遇到换行符和<br>标签时才会换行。

p {
  white-space: pre;
}

<p>a b       c</p>

如果您需要每个黑色空格占用恰好一个字符宽度，请使用等宽字体。

p {
  white-space: pre;
  font-family: monospace;
}

<p>a b       c</p>

- Stickers

Answer 2

你可以尝试在它们之间放置 。像这样：

<p>a b&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;c</p>

- Tân

---

不是一个干净的解决方案。 - weather api

这并不是很规范，但是你的问题没有明确说明可以或者不能够做什么。你问如何保留<p>a b c</p>中的空格（嗯，行内元素无法保留空格），而这个回答正好提供了解决方法。请尽量澄清你的问题。 - Matheus Avellar

Answer 3

有几种方法可以实现。 Pre 标签 一种是使用<pre>标签，它会保留空格并呈现内容。 空格实体 另一种是添加空格实体，例如 （不间断空格）。请注意，使用此方法时，有几个空格实体，而这个特定的实体不会自动换行，这可能不是您想要的行为。 呈现正常空格，浏览器不应该折叠，并且将按预期进行换行。

这里有一个不同Unicode空格列表可供使用。 CSS 另外，通常不应使用HTML实体来创建文本之间的空格，因为在这种情况下，更好的解决方案是使用margin或padding来分隔两个文本，并使每个文本位于其自己的元素中。

如另一个答案所述，如果间距是一致的但大于正常间距，则CSS letter-spacing也是一种选择。

以下是所有这些方法的示例（CSS在此处不重要）：

th, td {
  border: 1px solid black;
  padding: 3px;
}

th {
  background-color: darkgrey;
  color: white;
}

table {
  border-collapse: collapse;
}

body {
  font-family: sans-serif;
}

<table>
  <thead>
    <tr>
      <th colspan="2">HTML Spacing</th>
    </tr>
    <tr>
      <th>Method</th>
      <th>Result</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Normal</td><td><p>a b       c</p></td>
    </tr>
    <tr>
      <td>Pre Tag</td><td><pre>a b       c</pre></td>
    </tr>
    <tr>
      <td>Margin Left</td><td><span>a </span><span>b</span><span style="margin-left: 3.5em;">c</span></td>
    </tr>
    <tr>
      <td>Non-breaking Space</td><td><p>a b&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;c</p></td>
    </tr>
    <tr>
      <td>Em Space</td><td><p>a b&#8192;&#8192;&#8192;&#8192;&#8192;&#8192;&#8192;c</p></td>
    </tr>
    <tr>
      <td>Letter-Spacing</td><td><span>a </span><span style="letter-spacing: 3.5em;">bc</span></td>
    </tr>
  </tbody>
</table>

- KthProg

Answer 4

使用 CSS 属性 word-spacing 来设置单词之间的间距。您还可以使用 <span> 并应用 margin 或 padding。

span { margin-left:1em }
<p>a b <span>c</span></p>

- Rob

Answer 5

使用  。这也不会换行。

- Yogi

Answer 6

如其他人所说，你可以使用 来添加空格。

但是你也可以使用 和 来添加制表符。

- Julien J