Question

如何在html中的文本之间添加空格？例如，

<p>a b       c</p>

你在b和c之间有什么空间？

Answer 1

您可以尝试将 放在它们之间。像这样：

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

Answer 2

尝试使用值为pre的{{3}}。

pre保留了空白的序列。行仅在源中的换行符和<br>元素处断开。

＆＃13;

p {
  white-space: pre;
}

＆＃13;

<p>a b       c</p>

＆＃13;

如果您需要每个黑色空格只能使用一个字符宽度，请使用white-space字体。

＆＃13;

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

＆＃13;

<p>a b       c</p>

＆＃13;

Answer 3

有几种方法。

预标记

一种是使用<pre>标记，它将呈现内容空间完整的内容。

空间实体

另一种是添加空间实体，例如 （非破坏空间）。请记住这种方法，有几个空间实体，这个特定的实体不会自动换行，这可能不是你想要的行为。  呈现一个正常空间，~~，浏览器不应该崩溃~~，并且会按预期进行分词。

以下是您可以使用的list of different Unicode spaces。

<强> 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>

Answer 4

正如其他人所说，您可以添加一个空格： 

但也添加标签：&emsp; 和 &ensp;

Answer 5

使用 。这也不会打破。

Answer 6

使用the CSS property word-spacing设置字词之间的空格。您还可以使用<span>并应用边距或填充。

所以：

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

如何在html中的文本之间放置空格？

6 个答案: