紀錄工作經驗、相關知識,解決技術相關問題。

HTML

HTML 空格 / 空白字元    ‌ ‍

HTML 空格

HTML 空格

HTML空格,又稱 HTML 空白字元 ( white space ),在文章編輯中,預設都是使用 &nbsp 不換行空格,但其實除了   不換行空格,HTML 空白共有6種,分別是:

HTML說明
 半形空格
 全形空格
 窄空格
 不換行空格
‌零寬不連字
‍零寬連字
HTML 空白字元

在 HTML 網頁中一般用的是   ( No-Break Space 不換行空格),在網頁編輯/文章編輯中最常使用,其中會影響畫面顯示的有4種,其餘2種用於特殊符號或語言。

HTML 空格,在鍵盤按鍵上英文是 Space ,就是中文俗稱的空白鍵,所有的 HTML 空格可以大致理解為是英文的縮寫,以下介紹 6 種空格。

半形空格 

  英文全名 En Space,En 是半形字元的單位,Space 就是俗稱的空白,會影響網頁畫面顯示。

空白 空白
<p>空白 空白</p>

全形空格 &emsp 

&emsp; 英文全名 Em Space,Em 事全形自原的單位,相對的一個 Em 等於兩個 En,會影響網頁畫面顯示。

空白&emsp;空白
空白 空白

窄空格 &thinsp;

&thinsp; 英文全名 Thin Space,寬度大約在 1/6 個 Em,會影響網頁畫面顯示。

空白$thinsp;空白
空白 空白

不換行空格 &nbsp;

&nbsp; 英文全名 No-Break Space,常用的 HTML 空格,會影響網頁畫面顯示。

由於 HTML 文檔中,單純輸入多個空白鍵,相當於編輯程式用來縮排,所以你會發現不論你案多少下,在網頁的呈現上最多只會空一格。

如果希望能用空白,來使文字與文字間隔出一個距離,那最常用的方法就是輸入多個 &nbsp;。

空白&nbsp;空白
空白 空白

零寬不連字 &zwnj;

&zwnj 英文全名 Zero Width Non Joiner,中文稱【零寬不連字】,是一個不列印字符,放在電子文本的兩個字符之間,抑制本來會發生的連字,而是以這兩個字符原本的字形來繪製,不影響網頁畫面顯示。(來源: 維基百科

空白&zwnj;空白
空白‌空白

零寬連字 &zwj;

&zwj 英文全名 Zero Width Non Joiner,中文稱【零寬不連字】, 零寬連字是一個控制字符,放在某些需要複雜排版語言的兩個字符之間,使得這兩個本不會發生連字的字符產生了連字效果。零寬連字符的Unicode碼位是U+200D ,不影響網頁畫面顯示。(來源: 維基百科

空白&zwj;空白
空白‍空白

發表迴響