CSS怎樣實(shí)現(xiàn)首行縮進(jìn)？針對(duì)這個(gè)問題，今天小編總結(jié)了這篇文章，希望能幫助更多想解決這個(gè)問題的朋友找到更加簡(jiǎn)單易行的辦法。
把 Web 頁面上的段落的第一行縮進(jìn)，這是一種最常用的文本格式化效果。
CSS 提供了 text-indent 屬性，該屬性可以方便地實(shí)現(xiàn)文本縮進(jìn)。
通過使用 text-indent 屬性，所有元素的第一行都可以縮進(jìn)一個(gè)給定的長(zhǎng)度，甚至該長(zhǎng)度可以是負(fù)值。
這個(gè)屬性最常見的用途是將段落的首行縮進(jìn)，下面的規(guī)則會(huì)使所有段落的首行縮進(jìn) 5 em：
重慶分公司
重慶分公司
p {text-indent: 5em;}注意：一般來說，可以為所有塊級(jí)元素應(yīng)用 text-indent，但無法將該屬性應(yīng)用于行內(nèi)元素，圖像之類的替換元素上也無法應(yīng)用 text-indent 屬性。不過，如果一個(gè)塊級(jí)元素（比如段落）的首行中有一個(gè)圖像，它會(huì)隨該行的其余文本移動(dòng)。
提示：如果想把一個(gè)行內(nèi)元素的第一行“縮進(jìn)”，可以用左內(nèi)邊距或外邊距創(chuàng)造這種效果。
使用負(fù)值
text-indent 還可以設(shè)置為負(fù)值。利用這種技術(shù)，可以實(shí)現(xiàn)很多有趣的效果，比如“懸掛縮進(jìn)”，即第一行懸掛在元素中余下部分的左邊：
p {text-indent: -5em;}不過在為 text-indent 設(shè)置負(fù)值時(shí)要當(dāng)心，如果對(duì)一個(gè)段落設(shè)置了負(fù)值，那么首行的某些文本可能會(huì)超出瀏覽器窗口的左邊界。為了避免出現(xiàn)這種顯示問題，建議針對(duì)負(fù)縮進(jìn)再設(shè)置一個(gè)外邊距或一些內(nèi)邊距：
p {text-indent: -5em; padding-left: 5em;}繼承
text-indent 屬性可以繼承，請(qǐng)考慮如下標(biāo)記：
div#outer {width: 500px;}
div#inner {text-indent: 10%;}
p {width: 200px;}
some text. some text. some text.
this is a paragragh.
使用百分比值
text-indent 可以使用所有長(zhǎng)度單位，包括百分比值。
百分?jǐn)?shù)要相對(duì)于縮進(jìn)元素父元素的寬度。換句話說，如果將縮進(jìn)值設(shè)置為 20%，所影響元素的第一行會(huì)縮進(jìn)其父元素寬度的 20%。
在下例中，縮進(jìn)值是父元素的 20%，即 100 個(gè)像素：
div {width: 500px;}
p {text-indent: 20%;}
this is a paragragh
以上標(biāo)記中的段落也會(huì)縮進(jìn) 50 像素，這是因?yàn)檫@個(gè)段落繼承了 id 為 inner 的 div 元素的縮進(jìn)值。
擴(kuò)展：
CSS 文本屬性（Text）
| 屬性 | 描述 | CSS |
|---|---|---|
| color | 設(shè)置文本的顏色。 | 1 |
| direction | 規(guī)定文本的方向 / 書寫方向。 | 2 |
| letter-spacing | 設(shè)置字符間距。 | 1 |
| line-height | 設(shè)置行高。 | 1 |
| text-align | 規(guī)定文本的水平對(duì)齊方式。 | 1 |
| text-decoration | 規(guī)定添加到文本的裝飾效果。 | 1 |
| text-indent | 規(guī)定文本塊首行的縮進(jìn)。 | 1 |
| text-shadow | 規(guī)定添加到文本的陰影效果。 | 2 |
| text-transform | 控制文本的大小寫。 | 1 |
| unicode-bidi | 設(shè)置文本方向。 | 2 |
| white-space | 規(guī)定如何處理元素中的空白。 | 1 |
| word-spacing | 設(shè)置單詞間距。 | 1 |
| hanging-punctuation | 規(guī)定標(biāo)點(diǎn)字符是否位于線框之外。 | 3 |
| punctuation-trim | 規(guī)定是否對(duì)標(biāo)點(diǎn)字符進(jìn)行修剪。 | 3 |
| text-align-last | 設(shè)置如何對(duì)齊最后一行或緊挨著強(qiáng)制換行符之前的行。 | 3 |
| text-emphasis | 向元素的文本應(yīng)用重點(diǎn)標(biāo)記以及重點(diǎn)標(biāo)記的前景色。 | 3 |
| text-justify | 規(guī)定當(dāng) text-align 設(shè)置為 "justify" 時(shí)所使用的對(duì)齊方法。 | 3 |
| text-outline | 規(guī)定文本的輪廓。 | 3 |
| text-overflow | 規(guī)定當(dāng)文本溢出包含元素時(shí)發(fā)生的事情。 | 3 |
| text-shadow | 向文本添加陰影。 | 3 |
| text-wrap | 規(guī)定文本的換行規(guī)則。 | 3 |
| word-break | 規(guī)定非中日韓文本的換行規(guī)則。 | 3 |
| word-wrap | 允許對(duì)長(zhǎng)的不可分割的單詞進(jìn)行分割并換行到下一行。 | 3 |
關(guān)于CSS實(shí)現(xiàn)首行縮進(jìn)的方法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
