CSS 段落縮排、凸排怎麼寫：text-indent 首行空兩字（WordPress 適用）

寫中文的習慣是每段第一行空兩個字。很多人在網頁上也照做，在段落前面打兩個全形空白，但這樣有幾個問題：

• 每一段都要手動打，漏打就不整齊。
• 從網頁複製文字時，空白會跟著被複製。
• 搜尋結果、社群分享的摘要開頭會多兩個空白。

用 CSS 的 text-indent 一次設定就好，內容裡不用打任何空白。

首行空兩個字

/* 文章內文的每一段，第一行空兩個字 */
.entry-content p {
  text-indent: 2em;
}

• text-indent 設定段落第一行往內縮多少，第二行以後不受影響。
• 2em：em 是「目前文字的大小」，2em 就是兩個字的寬度。字放大縮小，縮排也跟著變，永遠是兩個字。
• .entry-content p：只針對文章內文的段落。不加 .entry-content，網站上所有段落（頁尾、側欄、按鈕旁的說明）都會縮排。

實測：Twenty Twenty-Five 的內文字大約 18.3 像素，第一行縮了 37 像素；Twenty Twenty-One 的字是 20 像素，縮了 40 像素，兩個佈景主題都剛好兩個字。

加在 WordPress 哪裡

• 傳統佈景主題：「外觀 → 自訂 → 附加的 CSS」。
• 區塊佈景主題（例如 Twenty Twenty-Five）：網站編輯器的「樣式」裡也有「附加的 CSS」。
• 或放在子佈景主題的 style.css。

兩個官方佈景主題的文章內文都有 entry-content 這個 class，所以上面的寫法都有效。其他佈景主題如果沒有縮排，在 Chrome 對著文章內文按右鍵「檢查」，看外層的 class 叫什麼，換掉 .entry-content。

置中的段落會偏右

段落設成置中時，縮排還是會作用：整行文字先往右縮 2 個字，再置中，看起來就偏右了。實測一句置中的話，往右偏了將近一個字（Twenty Twenty-Five 18 像素、Twenty Twenty-One 20 像素）。

WordPress 區塊編輯器置中的段落，會自動加上 has-text-align-center 這個 class，針對它把縮排拿掉：

/* 置中的段落不要縮排，不然會偏右 */
.entry-content p.has-text-align-center {
  text-indent: 0;
}

加上後，兩個佈景主題的置中段落都回到正中間（偏移 0）。

凸排：「註一：」後面對齊

凸排是反過來：第一行往左凸出，第二行以後往內縮。常用在註解、參考資料、條列的說明。例如一段以「註一：」開頭的長註解，換行之後，第二行的文字要對齊在「註一：」的後面，標籤才會單獨突出來、好找。

/* 凸排：第一行往左凸出 3 個字，第二行以後對齊在「註一：」後面 */
.entry-content p.note {
  padding-left: 3em;
  text-indent: -3em;
}

• padding-left: 3em 先把整段往右推 3 個字。
• text-indent: -3em 再讓第一行往左拉回 3 個字。
• 數字換成標籤的字數，「註一：」是 3 個字就用 3em。

要讓某一段套用，在區塊編輯器選取那個段落，右邊區塊設定最下面的「進階設定」裡，「附加的 CSS 類別」填 note。

實測：「註一：」那段第一行從 0 開始，第二、三行都對齊在 3 個字的位置（55、60 像素，依兩個佈景主題的字級）。

新寫法：hanging

/* 新寫法：hanging 會反過來，第一行不縮、其他行縮 3em */
.entry-content p.note {
  text-indent: 3em hanging;
}

text-indent 加上 hanging，意思是反過來：第一行不縮，其他行縮 3em，不用另外寫 padding-left。實測結果和上面完全一樣。

這是比較新的寫法，我們測的 Chrome 155 支援，比較舊的瀏覽器可能看不懂；要照顧所有人，用上面 padding-left 加負數的寫法比較保險。

段落內換行也要縮：each-line

在區塊編輯器按 Shift + Enter，會在同一個段落裡換行（不是新的一段）。text-indent 只縮段落的第一行，換行後的那一行不會縮。想要它也縮：

/* 段落裡用 Shift + Enter 換的行，也一起縮排 */
.entry-content p {
  text-indent: 2em each-line;
}

實測：加了 each-line，Shift + Enter 換出來的第二行也縮了兩個字；沒加的話第二行從最左邊開始。each-line 和 hanging 一樣是比較新的寫法。

不適合縮排的地方

• 清單（項目符號、編號）：清單有自己的縮排，調整用 padding-left，不要用 text-indent。
• 很短的段落、標題、按鈕：只有一行的文字縮兩個字，看起來像沒對齊。
• 段落之間已經有空行：網頁上常見的寫法是段落之間空一行、不縮排。兩種擇一就好，都用會顯得鬆散。

延伸閱讀

• 網頁中文字型怎麼設定？font-family 與思源黑體載入
• CSS display 怎麼用：block、inline、inline-block、none、flex、grid 一次看懂
• 好用的 CSS 語法技巧：半透明、圓角、陰影、字型等 15 個常用寫法

正威網路行銷是 25 年經驗的基隆網頁設計工作室，提供 RWD 響應式客製化網頁設計，台北與全台客戶也歡迎來聊聊。