CSS 文本

縮進文本

把 Web 頁面上的段落的第一行縮進，這是一種最常用的文本格式化效果。

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%;}