一. 概要

在編寫(xiě) HTML 模板時(shí)，有時(shí)候會(huì)利用空格來(lái)充當(dāng)文字排版的手段，最為常見(jiàn)的情況是在一段文字之間插入空格，來(lái)分隔相對(duì)獨(dú)立的詞匯。但面對(duì)這種情況，一般是不會(huì)直接使用普通空格（半角空格，即英文輸入法下鍵盤(pán)直接輸入的空格），因?yàn)楫?dāng)我們期望連續(xù)輸入幾個(gè)這樣的空格來(lái)制造一段空白時(shí)，實(shí)際最終網(wǎng)頁(yè)上顯示出的空白大小只有一個(gè)空格的大小，因此通常會(huì)用 來(lái)代替半角空格，連續(xù)輸入多個(gè) 會(huì)產(chǎn)生相應(yīng)數(shù)量的空白 。實(shí)際上除了 外，Unicode 還定義了大量特性各異的，包含 HTML 實(shí)體形式的空格字符，本文要研究的正是這些平時(shí)相對(duì)較少被注意到的空格以及它們的特性。

二. Unicode 中有 HTML 實(shí)體形式的空格

以下是 Unicode 中有 HTML 實(shí)體形式的空格及其產(chǎn)生的空白的效果：

這些空格按特性基本可以分為三類(lèi)：

1. 不換行空格

不換行空格只有 一種，最主要特性是不會(huì)被瀏覽器判斷為可以在中間打斷，這也是 被創(chuàng)造出來(lái)的主要用途。這里引用一段簡(jiǎn)短的介紹：

is the entity used to represent a non-breaking space. It is essentially a standard space, the primary difference being that a browser should not break (or wrap) a line of text at the point that this occupies.

例如，"This is a test for non-breaking space" 這個(gè)句子，如果單詞之間的空格都使用半角空格，并把它置于一個(gè)寬度剛好不足的容器中時(shí)，"space" 這個(gè)單詞會(huì)因?yàn)閷挾炔蛔愣鴨为?dú)換行了。

如果想把 "breaking" 與 "space" 同時(shí)換行，這時(shí)只需要把 "breaking" 與 "space" 之間的半角空格替換為 即可：

可以看出，"-" 這類(lèi)普通字符仍然會(huì)被瀏覽器認(rèn)為是單詞的分隔點(diǎn)，而 "breaking" 與 "space" 之間由于有 的連接，由于 不會(huì)被打斷，因而瀏覽器會(huì)認(rèn)為它們是相連的一個(gè)完整單詞，在位置允許的情況下把它們同時(shí)換到下一行。

需要注意的是，如果一大段英文文字中的空格都使用 ，那么瀏覽器就無(wú)法正確識(shí)別出哪個(gè)字符才是單詞的開(kāi)始和結(jié)束，因而無(wú)論如何使用 word-wrap 和 word-break 等控制單詞斷開(kāi)或換行的 CSS 屬性，最終都很難避免在單詞中間斷開(kāi)單詞，這也往往不是我們想要的結(jié)果。因此如果段落中不同單詞之間有大量的連續(xù)空格，那么這些連續(xù)空格的第一個(gè)空格最好使用普通的半角空格，以保證單詞之間仍有正常的分隔。

2. 跟隨字體大小產(chǎn)生相應(yīng)空白的空格

這類(lèi)空格包含 三個(gè)空格字符，這三個(gè)空格都會(huì)根據(jù)不同的字體大小產(chǎn)生相應(yīng)的空白大小，分別是 1/2 em，1em，1/6em（有時(shí)被設(shè)計(jì)成1/5em）寬。其空白大小具體表現(xiàn)如下圖：

由于中文是等寬字體，因此和 所產(chǎn)生的空白大小與中文字大小具有明確的比例關(guān)系（一個(gè) 等于半個(gè)中文字的寬度，而一個(gè) 則是一個(gè)中文字的寬度），因此這類(lèi)空格很適合用于控制排版，例如：

3. 零寬連字控制空格

即 ‌ 和 ‍ ，這兩個(gè)空格字符并不會(huì)產(chǎn)生空白，僅能控制字符之間是否連字，這兩個(gè)字符也是“不打印字符”（或稱(chēng)作“控制字符”），即不會(huì)影響打印效果的字符，僅作字符特性控制。而所謂的連字，是西方字體中常見(jiàn)的現(xiàn)象，表示兩個(gè)單獨(dú)的字母在相連時(shí)可以連接為新的字母的現(xiàn)象。例如在德語(yǔ)中，"f" 與 "l" 之間連寫(xiě)會(huì)變成一個(gè)新字符，整個(gè)單詞對(duì)應(yīng)的語(yǔ)義也會(huì)發(fā)生改變或者產(chǎn)生不符合語(yǔ)法的情況。例如：

Auf‌lage（編輯） 是一個(gè)德語(yǔ)復(fù)合詞，由 "auf"（關(guān)于） 和 "lage"（位置）兩個(gè)組成成分構(gòu)成，在德語(yǔ)語(yǔ)法中，復(fù)合詞組成成分的邊界不能產(chǎn)生連字，因此 "f" 和 "l" 之間不應(yīng)該連字，如果在 HTML 上直接寫(xiě)入這個(gè)單詞，直接交由瀏覽器控制，則會(huì)產(chǎn)生如下的效果：

"f" 和 "l" 之間相連了，不符合德語(yǔ)的語(yǔ)法規(guī)范，因此需要在兩個(gè)字母之間插入一個(gè) ‌ 強(qiáng)制不連字，效果如下：

值得注意的是，并不是所有的瀏覽器都對(duì) ‌ 和 ‍ 敏感，目前 Chrome （44.0.2403.125）中這兩個(gè)字符并不能產(chǎn)生連字或不連字的控制，而 Safari（8.0.6）中則可以有效控制連字。

最后需要強(qiáng)調(diào)的是，雖然 Unicode 中有著各種不同特性的空格可以用于排版，但理論上還是不應(yīng)該用空格來(lái)進(jìn)行排版，排版應(yīng)該是 CSS 負(fù)責(zé)控制的，用于排版的空格并不屬于內(nèi)容但卻與內(nèi)容混排在一起，實(shí)際上相當(dāng)不利于維護(hù)。只有當(dāng)不便于使用 CSS（比如在 EML 中）等特殊情況時(shí)才考慮用空格參與排版。

以上所述是小編給大家介紹的HTML不同空格的特性與表現(xiàn)形式(推薦)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)我們網(wǎng)站的支持！