CSS解決瀏覽器的等寬空格問題

很多時候，希望能夠在 html 中使用空格排版。但瀏覽器在解析 html 時，會把連續的空格解析成乙個，所以我們會使用等這樣的佔位符。

但是也不是很可靠，比如空格間距非常大，那麼我們必須增加多個佔位符，同時頁面的體積會變得非常大。

同時，注意到 safari 中的寬度是已設定字元的空格寬度（safari 的預設字型為 times），也就是說乙個中文字元需要兩個佔位符。

具體情況如下圖所示：

其實，這不是 safari 的問題，而是字型的問題。解決的方式就是使用下面的屬性

font-family: 『宋體』;將 safari 的預設字型設定成「宋體」等中英文等寬的字型，就能解決。windows 版本的 safari 字型設定，需要直接使用中文「宋體」這樣的名稱而不是「simsun」（了解原因的兄弟請告訴我）。

但至此，我們的根本目標沒有解決，就是能否避免使用這樣的佔位符，而使用「原生」的空格。考慮針對空白的相應 css 屬性，具體了解有關 white-space 的用法，接下來就比較好處理了。

總結下使用 white-space 實現等寬空格的條件，有兩個。需要設定對應的屬性

white-space: pre;

然後設定等寬字元（包括等寬空格）即可。綜合起來，就是這樣

font-family: 『宋體』, simsun;

white-space: pre;

由於使用了中文 css 名稱，所以在實際使用中需要考慮樣式的字元編碼問題。同時，需要額外考慮的是，蘋果機是否有「宋體」（或者其他等寬的字型），有蘋果機的兄弟請幫忙測試下。

–split–

感謝小馬提供的另外乙個思路，就是使用 em 單位。1em 簡單的說，就可以認為是乙個字元寬度；同理，.5em 就是半個字元。那麼，上面的情況就可以使用這樣寫。

＜span>買＜ins class=」half-word」>＜/ins>寶＜ins class=」half-word」>＜/ins>貝：＜/span>＜br />

＜span>我的**：＜/span>＜br />

＜span>社＜ins class=」two-word」>＜/ins>區：＜/span>＜br />

對應的 css 應為

.half-word

.two-word

經測試通過。

–split–

針對這上述的兩種不同方法，個人認為應當按照實際情況考慮採用。比如第一種方法，雖然依賴具體的等寬字型，但沒有新增其他額外的結構，對於以後的維護會更加的方便；第二種方法，則更多的考慮了實際的應用情況（同時也不用依賴具體的等寬字型），但是也新增了額外的結構。

所以，如考慮到以後的可維護性，同時「語義」的角度上分析，推崇第一種做法。而實際的應用情況下，同時需要應用比較複雜時，個人會選用第二種。\