溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關在HTML中插入空格的方法，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
在前端開發中，有時候需要在頁面中添加空格，那么如何添加？
一、鍵入空格
在html頁面中，我們可以通過鍵入“空格”鍵來插入空格。
例：在p.p1中鍵入一個空格，在p.p2中鍵入5個空格。注：此時是半角狀態鍵入“空格”
<p class="p1">測試文字| 億速云！</p> <p class="p2">測試文字| 億速云！</p>
效果圖：
可以看出，無論我們在HTML中是鍵入1個空格或者5個空格，還是其他多個空格，Web瀏覽器都會自動將這些空格折疊為僅一個空格。
那么我們如何顯示多個鍵入的空格？可以通過在全角狀態鍵入“空格”鍵，例：
<p class="p1">測試文字| 億速云！</p> <p class="p2">測試文字| 億速云！</p>
效果圖：
說明：全角空格會被解釋為漢字，以空白漢字的形式顯示，且是實數顯示（有多少就顯示多少）。
或者使用<pre>標簽來解決這個問題（半角狀態鍵入“空格”），例：
<p class="p1">
<pre>測試文字| 億速云！</pre>
</p>
<p class="p2">
<pre>測試文字| 億速云！</pre>
</p>效果圖：
二、使用html的空格符
我們可以使用html中表示空格的字符實體來在html頁面中插入空格，下面我們來看看在html中表示空格的字符實體有哪些：
字符：不斷行的空白格，該空格占據的寬度受字體影響。
 字符：相當全角狀態鍵入半個“空格”鍵（半個漢字的寬度）。
 字符：相當全角狀態鍵入“空格”鍵（1個漢字的寬度）。
下面我們來看看效果：
<p class="p1">測試文字| 字符nbsp顯示空格！</p><br / <p class="p2">測試文字| 字符ensp顯示空格！</p><br /> <p class="p3">測試文字| 字符emnsp顯示空格！</p>
效果圖：
關于在HTML中插入空格的方法就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
