CSS 段落首字縮排 text-indent

Karuizawa, Japan, photo by Sean Yeh

還記得小時候，老師都會在我們寫作文的時候要求大家在每個段落的開頭都要先空兩格。就標準的排版來說，文章開頭的縮排是一種常態。在網站上，我們要怎麼做才可以讓每一段的第一個字自動縮排呢？

說穿了其實相當簡單，只需要透過 CSS 裡面的text-indent 的屬性就可以輕鬆達到。下面是text-indent的語法：

標籤 {
text-indent: 數值;
}

標籤

以上是一種泛化的寫法。其中「標籤」的部分可以使用的為：p、div、h1～h6等等。「數值」部分可以依照需要填入想要的值。

縮排測試 h1

接下來我們可以做個測試：

下面有兩個h1標題，其中一個有加上indent-100的CSS Class，另一個則沒有加入這個CSS作為對照組。

<h1>標題一</h1>
<h1 class="indent-100">標題一</h1>

哪麼indent-100的CSS Class為何？我們在這個Class裡面放入text-indent，並且為了明顯一點，我們先誇張的使用100px作為數值。

.indent-100 {
    text-indent: 100px;
}

接下來，我們可以看看HTML顯示的結果。

很明顯的，沒有加上indent-100的h1標籤，裡面的文字緊鄰著h1的邊緣，而加上indent-100的h1標籤則向後縮排了一段不小的距離（縮排了100px）。

縮排測試 p

再試試p標籤。下面有兩個 p段落，其中一個有加上indent-100的CSS Class，另一個則沒有加入這個CSS作為對照組。我們使用了lorem作為範例文字。當你需要很多「假字」的時候，lorem是個不錯的選擇，它可以讓整個段落看起來不會有很假的感覺。

<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro, est?
Nobis...略...
</p>
<p class="indent-100">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro, est?
Nobis...略...
</p>

在這個測試裡面，CSS的部分不變。我們可以直接看結果：

結果一樣很明顯，沒有加上indent-100的p標籤的文字緊鄰p的邊緣，而加上indent-100的p標籤則向後縮排。透過這個方式，我們就可以做到每個段落向後縮排兩個字。

縮排測試 a、span

試試a標籤。

<a href="#">超連結</a>
<a href="#" class="indent-100">超連結</a>

試試span標籤。

<span>span 標籤</span>
<span class="indent-100">span 標籤</span>

一樣，CSS的部分不變。我們可以直接看結果：

結果竟然沒有縮排？之所以會有這樣的結果是因為a標籤與span標籤都是行內元素，而前面的h1～h6以及p標籤都是區塊元素。

數值

我們回到text-indent的語法：

標籤 {
text-indent: 數值;
}

前面我們解釋了關於標籤的的部分，接下來看數值的部分。前面例子的寫法意思是標籤的第一個字向內縮排 100px 個單位，我們也可以使用其他單位，例如 em、rem、百分比等。

.indent-1em {
text-indent: 1em;
}
.indent-1rem {
text-indent: 1rem;
}
.indent-1pcent {
text-indent: 1%;
}

縮排的結果如下：

負值

另外，text-indent 也可以使用負數作為數值，若使用負值，則第一個字會向前突出。

例如，我們設定下面兩個CSS Class，其中第一個是正值另一個是負值：

.indent-1rem {
text-indent: 1rem;
}
.indent-rev1rem {
text-indent: -1rem;
}

結果可以發現 -1 rem的段落，第一個字出現突排的效果，而1rem的段落則是維持縮排的效果：

實際運用

有時候，我們需要在網站內使用下面的排版方式：

上面這個段落，是個第一點、第二點等的需要用中文標示出的項目。這時候，我們可以採用text-indent來達成這個效果。在下面可以看到，我們在每個段落加上indent-rev2rem的class。

<p class="indent-rev2rem">
ㄧ、本合約所附之各項附件均構成本合約之一部份；且本合約一經雙方合法簽署後，將取代雙方先前就本合約所為之任何口頭或書面之承諾或協議。非經雙方書面同意不得修改，如有修改，應以書面為之。
</p>
<p class="indent-rev2rem">
二、本合約任何條款倘有無效、可撤銷、不合法或不可執行之情況者，並不影響其他條款之效力，且本合約之其他條款，均繼續有效。
</p>
<p class="indent-rev2rem">
三、本合約如有未盡事宜，依中華民國相關法令解釋之。
</p>
<p class="indent-rev2rem">
四、甲、乙雙方同意對於本合約所引起之任何疑義、糾紛，將依誠信原則解決之；如有訴訟之必要時，並同意以台灣台北地方法院為第一審管轄法院。
</p>
<p class="indent-rev2rem">
五、本合約自雙方簽署後生效；本合約壹式貳份，由雙方各執乙份為憑。
</p>

CSS部份如下：

.indent-rev2rem {
    text-indent: -2rem;
}

結果顯示在HTML上面如下：

我們可以發現利用text-indent的負值產生的突排效果，可以實現這個結果。