CSS word-spacing 屬性與用法

CSS word-spacing 屬性是用來設計網頁單字間的水平距離，用法與 letter-spacing 有點類似，不同的是 word-spacing 控制的是單字（或段落）而非單一字母，letter-spacing 控制的則是單一字元間的距離。CSS word-spacing 屬性還有一個特色，就是遇到中文字的時候，會將空白視為單字的分野，例如「早安您好」會被視為一個單字，而「早安您好」則會被視為兩個單字，因為中間多了一個空格。更完整的效果會在待會兒的範例中呈現。幾乎所有主流的瀏覽器都支援 CSS word-spacing 屬性的效果，以下為基本語法規則。

CSS word-spacing 基本語法

word-spacing: 距離值;

CSS word-spacing 參數『距離值』有三種模式，分別為 normal、長度、inherit，說明如下：

word-spacing:normal;　//預設值，單字或段落間的水平距離為預設效果。
word-spacing:長度;　//額外設計單字或段落間的水平距離，可用單位如 cm、em、px ... 等。
word-spacing:inherit;　//繼承自父層的 word-spacing 屬性值。

第三個屬性值 inherit 並未受到所有的瀏覽器支援，不建議使用。

CSS word-spacing 範例

<div style="word-spacing: -5px;border:2px #ccc solid;">Good morning, John.</div>
<div style="word-spacing: 30px;border:2px #ccc solid;">Good morning, John.</div>
<div style="word-spacing: 30px;border:2px #ccc solid;">這是測試範例這是測試範例這是測試範例</div>

呈現結果如下

Good morning, John.

這是測試範例這是測試範例這是測試範例

範例中共準備了三個列子來表現不同的 word-spacing 屬性效果，第一個 DIV 區塊設定「word-spacing: -5px;」讓段落間的距離為 -5，結果本來有的水平間隔就消失了，所以 word-spacing 也是可以有負值的。第二個 DIV 區塊將英文單字間的水平距離拉大的 30px，第三個 DIV 則是用來測試 word-spacing 對於繁體中文字的段落處理也可以正常運作。

更多網頁文字設計技巧