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

更多網頁文字設計技巧
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012