CSS 文字左右對齊與行距設定：text-align: justify、line-height 中文排版寫法

有人問：網頁上的中文段落，能不能像 Word 的「左右對齊」一樣，讓每一行的左右兩側都切齊？可以，CSS 一行就能做到。這篇也順便整理行距、字距這些影響閱讀舒適度的設定。

左右對齊：text-align: justify

.article p {
  text-align: justify;
}

瀏覽器會自動微調每一行的字距，讓左右兩邊都切齊。段落的最後一行不會被拉開，會跟 Word 一樣靠左，這是正常的。

舊寫法的 text-justify 還需要嗎？

這篇文章舊版還多加了一行：

.article p {
  text-justify: inter-ideograph;
}

inter-ideograph 是舊版 IE 專用的值，現在的瀏覽器都不認得，可以刪掉。text-justify 這個屬性本身目前也只有部分瀏覽器支援。中文段落只要寫 text-align: justify，瀏覽器就會把空隙分配在字與字之間，不需要另外設定。

只有一行也要兩端對齊：text-align-last

text-align: justify 不會拉開最後一行，所以只有一行的文字（例如短標籤）用它沒有效果。這時候改用 text-align-last：

.label {
  display: inline-block;
  width: 4em;
  text-align-last: justify;
}

常見的用法是表單或資料欄位的標籤對齊：「姓名」「電話」「電子郵件」字數不同，設定同樣的寬度再兩端對齊，後面的冒號就會排成一直線：

<p><span class="label">姓名</span>：王小明</p>
<p><span class="label">電話</span>：02-1234-5678</p>
<p><span class="label">電子郵件</span>：service@example.com</p>

width: 4em 是四個字的寬度，依最長的標籤字數調整。text-align-last 現代瀏覽器都支援。

手機版要注意：中英混排的空隙

段落裡有很長的英文單字或網址時，因為英文單字不能從中間拆開，只好整個移到下一行，上一行剩下的空間就會平均塞進字與字之間。在手機這種窄螢幕上，就容易出現某一行字距特別開的情況。

兩個處理方式：

.article p {
  text-align: justify;
  overflow-wrap: break-word; /* 超長的網址可以斷行,不會撐破版面 */
}

@media (max-width: 480px) {
  .article p {
    text-align: start; /* 手機上改回靠左對齊 */
  }
}

• overflow-wrap: break-word：一整行都放不下的超長網址，允許從中間斷開，避免超出畫面。
• 文章裡英文、網址很多的話，手機版乾脆改回靠左對齊，閱讀起來反而比較順。

行距：line-height

.article p {
  line-height: 1.8;
}

• 不要加單位：寫 1.8 代表「字級的 1.8 倍」，字放大縮小時行距會跟著等比例變化。寫成 24px 的話，字級一改行距就不對了；寫成 1.8em 也有類似的問題，裡面的子元素會繼承到算好的固定數值。
• 中文內文建議 1.6～1.8：中文字筆畫多、每個字都一樣大，行距比英文網站稍微寬一點比較好讀。
• 標題可以小一點：大字級的標題行距太寬會顯得鬆散，設 1.3～1.4 左右就好。

字距：letter-spacing

.article p {
  letter-spacing: 0.05em;
}

字距稍微拉開一點點，中文段落會比較透氣。用 em 當單位，字級改變時字距也會跟著等比例變化。不要拉得太開，字跟字距離太遠，反而不容易讀成一個詞。

段落間距：margin

.article p {
  margin: 0 0 1.2em;
}

四個方向的順序是上、右、下、左，這裡只寫三個值，代表上 0、左右 0、下 1.2em。段落之間留大約一行的空間，比每段開頭空兩格更適合網頁閱讀。

一行不要太長：max-width

.article {
  max-width: 40em;
  margin-inline: auto;
}

大螢幕上一行如果有六七十個字，眼睛換行時很容易跳錯行。限制內容的最大寬度，一行大約四十個字以內，讀起來會舒服很多。

整合起來

.article {
  max-width: 40em;
  margin-inline: auto;
}

.article p {
  margin: 0 0 1.2em;
  line-height: 1.8;
  letter-spacing: 0.05em;
  text-align: justify;
  overflow-wrap: break-word;
}

.article h2,
.article h3 {
  line-height: 1.4;
}

.article 要換成網站文章內容外層的 class，WordPress 很多主題是 .entry-content。不確定的話，在文章內文上按右鍵選「檢查」，就能看到外層的 class 名稱。

延伸閱讀

• CSS 文字太長自動變成「…」：單行與多行省略寫法（text-overflow、line-clamp）
• RWD 響應式網頁怎麼做？viewport 語法與 CSS 基本寫法完整教學
• 好用的 CSS 語法技巧：半透明、圓角、陰影、字型等 15 個常用寫法

文字排得舒服，訪客才讀得下去。正威網路行銷是 25 年經驗的基隆網頁設計工作室，提供客製化網頁設計與 RWD 響應式網站，服務台北與全台客戶，歡迎來聊聊。