首頁 > web前端 > css教學 > css如何設定字間距?字間距的設定方法

css如何設定字間距?字間距的設定方法

青灯夜游
發布: 2018-11-01 17:46:41
原創
9467 人瀏覽過

這篇文章帶給大家的內容是介紹css如何設定字間距?字間距的設定方法。有一定的參考價值,有需要的朋友可以參考一下,希望對你們有幫助。

其實在css設定字間距的方法很簡單,只需要使用一個屬性就行,這個就是 word-spacing屬性。下面我們來了解 word-spacing 屬性,看看它是如何設定字間距的。

其實word-spacing屬性類似letter-spacing,但用它控制的是一段文字中的字(單字或漢字)之間的空間量,而不是單字之間的空間量。關於letter-spacing屬性的介紹,在之前的文章【css如何設定字母間距? 】中有介紹,大家可以參考一下。

我們來看看word-spacing屬性的使用

p {
    word-spacing: 2em;
}
登入後複製

word-spacing 可以收到三個不同的值:

##1、 「normal」關鍵字,用於重置預設間距;


2、任何CSS長度單位的值(最常見的是px,em,rem);

2、 「inherit」關鍵字,它套用word-spacing父元素。

其中最佳做法是使用CSS長度單位:em;它可以調整字體大小。而使用像素可能會導致每個字(單字或漢字)之間的間距出現問題,因為它們的大小不會縮放;通常使用rem也很好,但它的瀏覽器支援度較低。在這個用例中,最好的間距與它所應用的字(單字或漢字)直接相關。

css如何設定字間距?字間距的設定方法

值得注意的是,在這種情況下,「字」實際上是指單一內聯內容- 這表示word-spacing影響inline-block元素和inline元素。在此範例中,透過設定word-spacing其父容器來分隔幾個這樣的元素:

css如何設定字間距?字間距的設定方法

說明:

#1、word-spacing屬性可透過CSS Transitions來進行動畫處理。

1、雖然根據規範可以使用「百分比」值來確定間距,但它可能會產生不可預測的結果(通常根本沒有效果)。

3、消除內嵌塊元素之間空間的一種方法是:將white-space設為零。

我們來看看

word-spacing屬性的相容性

css如何設定字間距?字間距的設定方法

#關於行動瀏覽器支援度的說明:絕大多數行動裝置都支援word-spacing屬性的使用,但是,使用了非Apple版本的Webkit或Netfront瀏覽器的某些裝置卻不支援。具體內容請訪問QuirksMode鏈接,上面有詳細說明。

QuirksMode連結位址:http://www.quirksmode.org/m/table.html#t26

總結:以上就是這篇文章所介紹的css設定字間距的方法,希望能對大家的學習有所幫助。

以上是css如何設定字間距?字間距的設定方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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