首頁 > web前端 > css教學 > css文字屬性中的text-indent的解析

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

不言
發布: 2018-07-19 15:41:58
原創
3422 人瀏覽過

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

p{text-align:2em;}

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

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

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

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

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

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

  • p{width:400px;}

  • p{text-indent :5%;}

這是一段文字,測試文字縮排百分比的使用

< /p>

我們可以看到首行文字縮排了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中文網其他相關文章!

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