怎么用css實(shí)現(xiàn)首行縮進(jìn)功能

這篇文章主要介紹“怎么用css實(shí)現(xiàn)首行縮進(jìn)功能”的相關(guān)知識(shí)，小編通過實(shí)際案例向大家展示操作過程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“怎么用css實(shí)現(xiàn)首行縮進(jìn)功能”文章能幫助大家解決問題。

很多小伙伴在使用html做段落編寫的時(shí)候，總是會(huì)覺得在閱讀上有些不適。因?yàn)槲覀兊臅鴮懥?xí)慣里面有一條是這樣的：段落開頭空兩格。但是html代碼默認(rèn)是沒有這樣的規(guī)則的。這時(shí)候有些小伙伴可能會(huì)機(jī)智的用空格來實(shí)現(xiàn)這樣的效果，但實(shí)際上css中提供了html首行縮進(jìn)屬性。

使用空格字符進(jìn)行縮進(jìn)

html空格怎么打?一文中有詳細(xì)介紹了HTML空格的使用。我們可以使用四個(gè)空格來達(dá)到首行縮進(jìn)的效果。

   <p>&nbsp;&nbsp;&nbsp;&nbsp;這是一段話很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長</p>
    <p>這是另一端話一段話很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長</p>

使用這種方法有兩點(diǎn)問題：第一，換行符不好打不好記；第二，換行的空格不好控制（一個(gè)中文字符在不同字體大小的情況下對(duì)應(yīng)的空格數(shù)是不同的，上述代碼使用了四個(gè)空格，只空了一個(gè)字符的位置（大約，并不準(zhǔn)確））。

讓空格不合并來使用空格縮進(jìn)

html是可以直接使用空格來進(jìn)行空格效果的實(shí)現(xiàn)的，只不過多個(gè)空格會(huì)被合并成一個(gè)空格，使用white-space: pre;可以讓空格不進(jìn)行合并。

    <p >    這是一段話很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長</p>
    <p>這是另一端話一段話很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長</p>

使用這種方法解決了上一種方法的不好記的問題，但空格長度的問題還是沒有解決。

配合偽類的使用

不管是第一種方法還是第二種方法，都有一個(gè)問題：空格在html代碼內(nèi)，有時(shí)候會(huì)出現(xiàn)多了或者少了空格的情況，會(huì)讓頁面不美觀，這時(shí)候可以在方法二的基礎(chǔ)上進(jìn)行拓展，使用 :before偽元素在每個(gè)p元素前（小編這里使用class選擇器進(jìn)行選擇，不然全部p元素都會(huì)出現(xiàn)這種效果而失去對(duì)照）插入空格以實(shí)現(xiàn)段落前縮進(jìn)的效果。

<style>
     .indent:before{
         content:"    ";
         white-space: pre;
         }
</style>
    <p class="indent">這是一段話很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長</p>
    <p>這是另一端話一段話很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長</p>

這種方法已經(jīng)解決了大部分的問題，但最后還是留下了寬度的問題。

使用首行屬性進(jìn)行縮進(jìn)

其實(shí)，css中提供了首行縮進(jìn)的屬性，只要將text-indent設(shè)置一個(gè)值，就能實(shí)現(xiàn)首行縮進(jìn)的效果。最常用的值是以em為單位的值，2em表示二倍當(dāng)前字體大小，以16px為例，2em就是32px，也就是兩個(gè)字符的距離。

  <p >這是一段話很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長</p>
    <p>這是另一端話一段話很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長</p>

使用這種方法能完美解決縮進(jìn)問題，是縮進(jìn)方案的最優(yōu)解（不過一般將這種屬性寫在單獨(dú)的css內(nèi)以方便作為特殊樣式調(diào)用而不是行間樣式，小編這里是為了便展示）。

關(guān)于“怎么用css實(shí)現(xiàn)首行縮進(jìn)功能”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。