css：word-spacing 和 letter-spacing 的使用區別
阿新 • • 發佈：2019-01-09
letter-spacing
設定單個字母之間的間隔距離。對於英文而言，字母的意思就是單個字母；對於中文而言，單箇中文字就是一箇中文字母。
word-spacing
設定單詞與單詞之間的間隔間距，這個 “單詞” 是如何定義的呢？只要用空格隔開的就是一個單詞。
案例演示
letter-spacing
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> body { margin: 100px; } p { font-size: 14px; letter-spacing: 5px; word-spacing: 0px; line-height: 30px; } </style> </head> <body> <div> <p>hello hello hello hello</p> <p>測試程式碼 位置測試 程式碼位置</p> <p>測試程式碼位置測試程式碼位置</p> </div> </body> </html>
從上面可以看出，字與字之間的距離變長。需要注意的是空格也是一個字唷
letter-spacing
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> body { margin: 100px; } p { font-size: 16px; letter-spacing: 0px; word-spacing: 5px; line-height: 30px; } </style> </head> <body> <div> <p>hello hello hello hello</p> <p>測試程式碼 位置測試 程式碼位置</p> <p>測試程式碼位置測試程式碼位置</p> </div> </body> </html>
