html5怎么開頭空格？利用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;這是一段話很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)</p>
    <p>這是另一端話一段話很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)</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 style="white-space: pre;">    這是一段話很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)</p>
    <p>這是另一端話一段話很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)</p>

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

配合偽類的使用

不管是第一種方法還是第二種方法，都有一個(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">這是一段話很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)</p>
    <p>這是另一端話一段話很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)</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 style="text-indent: 2em;">這是一段話很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)</p>
    <p>這是另一端話一段話很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)</p>

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

小結(jié)

以上就是html首行縮進(jìn)兩個(gè)字符怎么弄的全部?jī)?nèi)容。更多優(yōu)質(zhì)內(nèi)容介紹敬請(qǐng)關(guān)注W3C技術(shù)頭條。