css文字屬性中的text-indent的解析

文字屬性text-indent是設定文字首行縮排的，任何元素都可以讓首行以給定的長度縮進，長度甚至可以是負數；但只對快元素生效!

p{text-align:2em;}

這條規則讓任何段落的首行縮排2個字元大小。

通常，text-indent可套用於任何區塊級元素，但無法套用於內聯元素，也不能用於取代元素，如6ed09268cbdd0015bce8dcbbdfa9bfe4,但是，如果段落首行有一個圖像，那麼它將隨文字一起移動。

text-indent支援負的文字縮進，如

• #p{text-indent:-2em; }

這裡所有的段落的首行就會向前移動2個文字大小。不過使用負的text-indent時要注意文字跑出元素外面，這樣你要的效果可能反而就得不到了。

這裡要注意的是百分比的使用，百分比是指相對於父元素的值，如果設定5%的縮排值，那麼此元素的首行將按其父元素的寬度的5%進行縮排。如：

• p{width:400px;}

• p{text-indent :5%;}

e388a4556c0f65e1904146cc1a846beee388a4556c0f65e1904146cc1a846bee這是一段文字，測試文字縮排百分比的使用94b3e26ee717c64999d7867364b1b4a36fb279ad3fd4344cbdd93aac6ad173ac

我們可以看到首行文字縮排了20px，計算原理就是父元素400x5% = 20px，當然這裡得注意p元素沒有設定寬度，設定了寬度就以本身寬度的百分比來計算。

然而，text-indent中最有趣的估計是繼承，它繼承的是計算值，而非宣告值。如

• body{width:500px;}

• p{width:400px; text-indent:10%;}

• p{width:200px;}

<span style="font-size: 14px;"><p><br/>这是外面的文字<br/><p>这是里面的文字</p><br/></p></span>

這裡便可以看到兩段文字的首行都縮進了50px，而不是外面的文字50px，p元素中的文字縮進40px，可見它繼承的是計算值，而不是聲明值。

相關推薦：

CSS裡的text-indent怎麼使用

以上是css文字屬性中的text-indent的解析的詳細內容。更多資訊請關注PHP中文網其他相關文章！