如何使用 HTML/CSS 在文本中插入空格或制表符

在 HTML/CSS 中插入空格或制表符可以使文本间距变得更加美观，但是在 Web 开发过程中，有很多开发者会碰到这样的问题：既然 HTML/CSS 可以插入空格和制表符，那么应该该如何在文本中插入呢？

插入空格

使用 HTML 实体

在 HTML 中，空格被认为是一个连字符，因此如果想要在文本中插入空格，可以使用空格的 HTML 实体  。   的全称是“non-breaking space”，因为它可以避免出现在空格位置的文本被自动断开，从而保持文本在同一行内。

<p>在 HTML 中插入空格可以使用 &nbsp;</p>

此时页面上的效果为“在 HTML 中插入空格可以使用  ”。

使用 CSS 属性

除了使用 HTML 实体，还可以使用 CSS 属性在文本中插入空格。CSS 提供了一个word-spacing 属性，可以在单词之间增加空格。

<p class="word-space">使用CSS属性在文本中插入空格</p>

.word-space {
  word-spacing: 20px;
}

此时页面上的效果为“使用 CSS 属性 在 文本中 插入 空格”。

插入制表符

使用 HTML 实体

和插入空格一样，要在 HTML 中插入制表符，可以使用制表符的 HTML 实体 	。 	 代表了按键盘上的“tab”键产生的制表符。

<pre>	在 HTML 中插入制表符可以使用 &#9;</pre>

此时页面上的效果为：

    在 HTML 中插入制表符可以使用

使用 CSS 属性

和插入空格一样，要使用 CSS 属性在文本中插入制表符，可以使用 text-indent 属性，在文本行的开头插入一个制表符。

<p class="tab-indent">在CSS中插入制表符</p>

.tab-indent {
  text-indent: 20px;
}

此时页面上的效果为：

    在CSS中插入制表符

以上就是如何使用 HTML/CSS 在文本中插入空格或制表符的方法了。无论是使用 HTML 实体还是 CSS 属性，都可以让文本在排版中更加美观。