在 HTML 中的文本之间添加空格

Sushant Poudel 2023年2月19日 2021年10月2日
  1. 使用 <pre> 标签在 HTML 文本中插入空格
  2. 使用&nbsp; 在 HTML 文本中插入空格
  3. 使用 CSS padding 属性在 HTML 文本中插入空格
在 HTML 中的文本之间添加空格

本文将讨论几种在 HTML 文本中插入空格和制表符的方法。HTML 通常一次不允许有多个空格。这些方法有助于添加多个空格。

使用 <pre> 标签在 HTML 文本中插入空格

<pre> 标签定义了一个预先格式化的文本。它完全按照 HTML 代码中所写的方式呈现文本。此标签内的空白区域显示为已写入。几乎所有的网络浏览器都支持它。我们可以使用 <pre> 标签在 HTML 文本中插入空格。<pre> 标签支持 HTML 中几乎所有的全局属性。

例如,在 HTML 正文中,首先打开 <pre> 标签。在此标签内,键入你选择的文本。现在,通常在文本中句子的单词之间添加一些随机空白(I'm learning HTML used in the example below)。完成所需的文本后,关闭 <pre> 标签。另外,不要忘记关闭所有以前打开的标签。

下面的示例说明了一种在 HTML 文本中添加存储空间的方法。<pre> 标签打开后,它指定一个预先格式化的文本。我正在学习 HTML 文本写在 <pre> 标签内。正如我们所看到的,在单词 learningHTML 之间使用了五个空格。输出还在两个单词之间显示五个空格,就像它写的一样。我们可以根据需要放置尽可能多的空格。这样,我们就可以在 HTML 中的文本中添加空格。

示例代码:

<pre> I'm learning HTML</pre>

使用&nbsp; 在 HTML 文本中插入空格

我们可以使用&nbsp; 标记以在 HTML 代码的文本中添加空格。实体 NBSP 代表不间断空间。不间断空格解释为不会换行的空格。由不间断空格分隔的两个单词将位于同一行而不是不同的行。阻止浏览器截断 HTML 页面中的空格是有利的。

例如,在 HTML 正文中,键入你选择的文本。在要添加空格的位置,键入&nbsp;。你必须输入相同数量的&nbsp; 作为你想要的空白。写五个&nbsp; 的实例,然后,继续输入其余的文字。完成后,关闭所有之前打开的标签。

下面的示例说明了另一种在 HTML 代码中的文本中添加空格的方法。在单词 learning 之后,实体&nbsp; 随后被订购五次。这意味着在单词 learningHTML 之间有五个空格。如果你在代码的文本中输入 5 个空格,浏览器将删除四个空格,但 &nbsp 有助于添加任意数量的空格。因此,这是在 HTML 代码中添加空格的另一种方式。

示例代码:

<body>
I'm learning&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;HTML 
</body>

使用 CSS padding 属性在 HTML 文本中插入空格

我们还可以使用 CSS padding 属性在 HTML 文本中添加空格。我们可以使用 padding 属性和 <span> 标签来实现空白空间。<span> 标签被称为内联容器,因为它不从新行开始。它用于标记文本或文档。它本质上不代表任何东西,因为它不会单独产生任何视觉变化。它用于样式目的,也受所有 Web 浏览器支持。它还支持 HTML 中的所有全局和事件属性。我们可以在 <span> 元素中使用 padding-left 属性来添加空格。

例如,在 HTML 正文中,输入你想要的文本。在要添加空白的地方,创建一个 <span> 元素并在其中应用样式。将 padding-left 属性设置为 30px。之后,关闭 <span> 标签。编写剩余的文本并关闭代码中所有先前打开的标签。

在下面的示例中,我们在单词 learning 之后创建了一个 <span> 元素。我们在元素中应用了 30px 的左填充。这意味着我们在单词 learning 之后创建了一个 30px 的空间,然后其余的单词继续。因此,我们使用 CSS 和 HTML 在文本中添加了空格。

示例代码:

<body>
I'm learning <span style="padding-left:30px;"></span>HTML
</body>
Sushant Poudel avatar Sushant Poudel avatar

Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.

LinkedIn