在HTML中插入空格的方法

這篇文章將為大家詳細(xì)講解有關(guān)在HTML中插入空格的方法，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

在前端開發(fā)中，有時(shí)候需要在頁面中添加空格，那么如何添加？

一、鍵入空格

在html頁面中，我們可以通過鍵入“空格”鍵來插入空格。

例：在p.p1中鍵入一個(gè)空格，在p.p2中鍵入5個(gè)空格。注：此時(shí)是半角狀態(tài)鍵入“空格”

<p class="p1">測(cè)試文字| 億速云！</p>
<p class="p2">測(cè)試文字|     億速云！</p>

效果圖：

可以看出，無論我們?cè)贖TML中是鍵入1個(gè)空格或者5個(gè)空格，還是其他多個(gè)空格，Web瀏覽器都會(huì)自動(dòng)將這些空格折疊為僅一個(gè)空格。

那么我們?nèi)绾物@示多個(gè)鍵入的空格？可以通過在全角狀態(tài)鍵入“空格”鍵，例：

<p class="p1">測(cè)試文字|　億速云！</p>
<p class="p2">測(cè)試文字|　　　　　　億速云！</p>

效果圖：

說明：全角空格會(huì)被解釋為漢字，以空白漢字的形式顯示，且是實(shí)數(shù)顯示（有多少就顯示多少）。

或者使用<pre>標(biāo)簽來解決這個(gè)問題（半角狀態(tài)鍵入“空格”），例：

<p class="p1">
    <pre>測(cè)試文字| 億速云！</pre>
</p>
<p class="p2">
    <pre>測(cè)試文字|     億速云！</pre>
</p>

效果圖：

二、使用html的空格符

我們可以使用html中表示空格的字符實(shí)體來在html頁面中插入空格，下面我們來看看在html中表示空格的字符實(shí)體有哪些：

&nbsp;字符：不斷行的空白格，該空格占據(jù)的寬度受字體影響。

&ensp;字符：相當(dāng)全角狀態(tài)鍵入半個(gè)“空格”鍵（半個(gè)漢字的寬度）。

&emsp;字符：相當(dāng)全角狀態(tài)鍵入“空格”鍵（1個(gè)漢字的寬度）。

下面我們來看看效果：

<p class="p1">測(cè)試文字|&nbsp; 字符nbsp顯示空格！</p><br /
<p class="p2">測(cè)試文字|&ensp;字符ensp顯示空格！</p><br />
<p class="p3">測(cè)試文字|&emsp;字符emnsp顯示空格！</p>

效果圖：

關(guān)于在HTML中插入空格的方法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。