首頁 > web前端 > css教學 > CSS怎麼縮排文字?

CSS怎麼縮排文字?

(*-*)浩
發布: 2019-11-27 14:59:38
原創
3843 人瀏覽過

CSS怎麼縮排文字?

CSS 文字屬性可定義文字的外觀。

縮排文字

把 Web 頁面上的段落的第一行縮進,這是一種最常用的文字格式化效果。       ( 推薦學習:CSS入門教學 )

CSS 提供了 text-indent 屬性,此屬性可方便地實現文字縮排。

透過使用 text-indent 屬性,所有元素的第一行都可以縮排一個給定的長度,甚至該長度可以是負值。

這個屬性最常見的用途是將段落的首行縮進,下面的規則會使所有段落的首行縮排5 em:

p {text-indent: 5em;}
登入後複製

注意:一般來說,可以為所有區塊級元素套用text-indent,但無法將該屬性應用於行內元素,圖像之類的替換元素上也無法套用text-indent 屬性。不過,如果一個區塊級元素(例如段落)的首行中有一個圖像,它會隨該行的其餘文字移動。

提示:如果想把一個行內元素的第一行“縮排”,可以用左內邊距或外邊距創造這種效果。

使用負值

text-indent 也可以設定為負值。利用這種技術,可以實現很多有趣的效果,例如“懸掛縮進”,即第一行懸掛在元素中餘下部分的左邊:

p {text-indent: -5em;}
登入後複製

不過在為text-indent 設定負值時要當心,如果對一個段落設定了負值,那麼首行的某些文字可能會超出瀏覽器視窗的左邊界。為了避免這種顯示問題,建議針對負縮排再設定一個外邊距或一些內邊距:

p {text-indent: -5em; padding-left: 5em;}
登入後複製

使用百分比值

##text-indent 可以使用所有長度單位,包括百分比值。

百分數要相對於縮排元素父元素的寬度。換句話說,如果將縮排值設為 20%,則影響元素的第一行會縮排其父元素寬度的 20%。

在下例中,縮排值是父元素的20%,即100 個像素:

div {width: 500px;}
p {text-indent: 20%;}
<div>
<p>this is a paragragh</p>
</div>
登入後複製

繼承

text-indent 屬性可以繼承,請考慮以下標記:

div#outer {width: 500px;}
div#inner {text-indent: 10%;}
p {width: 200px;}
<div id="outer">
<div id="inner">some text. some text. some text.
<p>this is a paragragh.</p>
</div>
</div>
登入後複製
以上標記中的段落也會縮排50 個像素,這是因為這個段落繼承了id 為inner 的div元素的縮排值。

以上是CSS怎麼縮排文字?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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