很多小伙伴在使用html做段落編寫(xiě)的時(shí)候，總是會(huì)覺(jué)得在閱讀上有些不適。因?yàn)槲覀兊臅?shū)寫(xiě)習(xí)慣里面有一條是這樣的：段落開(kāi)頭空兩格。但是html代碼默認(rèn)是沒(méi)有這樣的規(guī)則的。這時(shí)候有些小伙伴可能會(huì)機(jī)智的用空格來(lái)實(shí)現(xiàn)這樣的效果，但實(shí)際上css中提供了html首行縮進(jìn)屬性。
使用空格字符進(jìn)行縮進(jìn)
html空格怎么打?一文中有詳細(xì)介紹了HTML空格的使用。我們可以使用四個(gè)空格來(lái)達(dá)到首行縮進(jìn)的效果。
<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>
<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)問(wèn)題：第一，換行符不好打不好記；第二，換行的空格不好控制（一個(gè)中文字符在不同字體大小的情況下對(duì)應(yīng)的空格數(shù)是不同的，上述代碼使用了四個(gè)空格，只空了一個(gè)字符的位置（大約，并不準(zhǔn)確））。
讓空格不合并來(lái)使用空格縮進(jìn)
html是可以直接使用空格來(lái)進(jìn)行空格效果的實(shí)現(xiàn)的，只不過(guò)多個(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>
使用這種方法解決了上一種方法的不好記的問(wèn)題，但空格長(zhǎng)度的問(wèn)題還是沒(méi)有解決。
配合偽類(lèi)的使用
不管是第一種方法還是第二種方法，都有一個(gè)問(wèn)題：空格在html代碼內(nèi)，有時(shí)候會(huì)出現(xiàn)多了或者少了空格的情況，會(huì)讓頁(yè)面不美觀，這時(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)解決了大部分的問(wèn)題，但最后還是留下了寬度的問(wèn)題。
使用首行屬性進(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)問(wèn)題，是縮進(jìn)方案的最優(yōu)解（不過(guò)一般將這種屬性寫(xiě)在單獨(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ù)頭條。
