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