控制單字間的距離│CSS│word-spacing-一化網頁設計

文章專區

網頁設計相關文章

CSS的word-spacing屬性可以用來控制網頁上英文單字之間的間距，由於英文字是以半形空白做為區隔，而此屬性便是控制此空白的間距，

全形空白則不受其影響，word-spacing可以為負值，如word-spacing: -5px

乍看之下跟letter-spacing屬性有些相似，但是word-spacing控制的是單字之間的距離，而letter-spacing則是控制單一字母間的距離。

範例：

See the Pen NORQrg by Ya (@bok770) on CodePen.

以上範例的句子：「e-work design」，如使用letter-spacing屬性，控制到的會是「e、-、w、o」……等等的單一文字之間的距離。

而若是使用word-spacing屬性的話，控制到的是「e-work」、「design」這兩個單字間的距離。

而word-spacing的另一項特性，句子若是中文字的話，如果中間有空格，也會將空格視為單字之間的分隔，

例如「一化網頁設計」會被視為一個單字，而「一化網頁設計」則會被視為兩個。

範例：

See the Pen Zqpgrm by Ya (@bok770) on CodePen.