CSS word-spacing 屬性

CSS word-spacing 屬性的功能是用來設計網頁文字＂單字或段落＂間的水平距離，無論中文單字還是英文單字都可用 word-spacing 屬性來修改單字水平間距，而且 word-spacing 屬性可以接受很多種常用的長度單位，例如 em, cm, px ... 等，大幅度改善以往水平間距離用空格排版的麻煩，而且透過 word-spacing 所調整的單字水平間距可以更細膩、更漂亮，所有主流的瀏覽器都支援。

如果你想控制的是各別字母間的水平距離，請使用：CSS letter-spacing 文字水平間距設計。

CSS word-spacing 屬性語法
word-spacing: 水平距離;
CSS word-spacing 屬性的水平距離有三種可以選擇的設定方式，第一種是預設的 normal、第二種是自訂長度、第三種則是繼承自父層的水平距離，分別條列於下給各位參考。
  • word-spacing:normal;　← 預設值，大部份情況下，使用 normal 等於沒寫。
  • word-spacing:自訂距離，可使用 em, cm, px ... 等通用單位。
  • word-spacing:inherit;　← 繼承自父層的單字水平距離，非所有瀏覽器支援，不建議使用。
CSS word-spacing 屬性範例
<span style="word-spacing:normal;">您好 歡迎光臨</span><br>
<span style="word-spacing:-5px;">您好 歡迎光臨</span><br>
<span style="word-spacing:0px;">您好 歡迎光臨</span><br>
<span style="word-spacing:10px;">您好 歡迎光臨</span><br>
<span style="word-spacing:0px;">We have experiment spirit.</span><br>
<span style="word-spacing:5px;">We have experiment spirit.</span><br>
<span style="word-spacing:10px;">We have experiment spirit.</span>
範例的效果
您好 歡迎光臨
您好 歡迎光臨
您好 歡迎光臨
您好 歡迎光臨
We have experiment spirit.
We have experiment spirit.
We have experiment spirit.
範例有繁體中文與英文句子透過 word-spacing 調整過的效果，word-spacing 屬性會根據句子的空格判斷各個中文單字或英文單字，進而調整空白的大小，如果使用負數，單字的水平距離會消失，所以原本的空格也就消失了。從範例可以看出，如果將 word-spacing 設定為 0px 並不會讓單字間的水平間隔消失，而是與 normal 的效果一樣。

延伸閱讀
© Copyright webtech.tw Since 2010