在 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