首頁 > web前端 > css教學 > 主體

深入理解CSS文字間距word-spacing與字元間距letter-spacing的不同(附代碼)

yulia
發布: 2018-09-08 10:45:31
原創
5850 人瀏覽過

CSS 把「字(word)」定義為任何非空白符字元組成的字串,並由某種空白字元包圍。 letter-spacing和word-spacing這兩個屬性都用來加入他們對應的元素中的空白。有時候常常會把兩者搞混淆,接下來,就和大家聊聊CSS中間隔的設定。

一、word-spacing   增加或減少字間的空白(即字間隔)

1、檢索或設定物件中的單字之間插入的空格數,允許為負值。
2、預設值為normal,等同於設定為0 
3、允許使用負值,會讓字母之間變得更緊湊
4、利用這個屬性,可能會創造字間隔太寬的文檔,所以,使用word-spacing 要謹慎使用

二、letter-spacing   增加或減少字符間的空白(即字符間距)

1、設置物件中的文字之間的間隔.每一個中文文字以及英文字母之間,都被隔開了所設定的距離,此屬性是控製字間距的。其屬性值是中英文都適用 
2、預設值為normal,等同於設定為0 
#3、用letter-spacing 只對文字起作用對於圖片失效的 
4、用letter-spacing對漢字是以一個字進行間隔的, 對於英文是以一個字母進行間隔的

 舉例:同樣是一句話,分別給letter-spacing和word-spacing屬性,看看他們有什麼不同

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   .a1{letter-spacing: 15px;}
   .a2{word-spacing: 15px;}
  </style>
 </head>
 <body>
  <p class="a1">have a nice day 今天心情怎么样呢?</p>
  <p class="a2">have a nice day 今天心情怎么样呢?</p>
 </body>
</html>
登入後複製

效果圖:

深入理解CSS文字間距word-spacing與字元間距letter-spacing的不同(附代碼)

#總結:CSS中的word-spacing 增加或減少字間的空白(即字間隔) ,letter-spacing  增加或減少字符間的空白(即字符間距)。預設情況下,letter-spacing我們幾乎都用不上,我們直接採用瀏覽器預設樣式就可以了。

 

以上是深入理解CSS文字間距word-spacing與字元間距letter-spacing的不同(附代碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板