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

当前位置：主页 > 学无止境 > WEB前端 > HTML >

Vue React JavaScript Angular CSS HTML

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

作者：迹忆客最近更新：2023/03/27 浏览次数：

本文将讨论几种在 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> 标签内。正如我们所看到的，在单词 learning 和 HTML 之间使用了五个空格。输出还在两个单词之间显示五个空格，就像它写的一样。我们可以根据需要放置尽可能多的空格。这样，我们就可以在 HTML 中的文本中添加空格。

示例代码：

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

 I'm learning HTML

使用` ` 在 HTML 文本中插入空格

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

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

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

示例代码：

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

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

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

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

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

示例代码：

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

上一篇：在 HTML 中创建多个类

下一篇：在 HTML 中开始新行

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

迹忆客专注技术分享