html5怎么開頭空格？利用css實現(xiàn)首行縮進(jìn)功能！

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

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

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

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

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

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

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

    <p style="white-space: pre;">    這是一段話很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長</p>
    <p>這是另一端話一段話很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長</p>

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

配合偽類的使用

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

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

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

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

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

  <p style="text-indent: 2em;">這是一段話很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長</p>
    <p>這是另一端話一段話很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長</p>

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

小結(jié)

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