CSS text-box-trim

在文字內容上方和下方留白，以達到視覺平衡。

Adam Argyle

發布日期：2025 年 1 月 14 日

自 Chrome 133 起，text-box 可讓開發人員和設計人員調整文字上方和下方的空間。

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: not supported.
  • Safari: 18.2.

長條碼：

text-box-trim: trim-start | trim-end | trim-both | none;
text-box-edge: cap | ex | text | leading + alphabetic | text;

Shorthand：

text-box: trim-both cap alphabetic;

這個屬性可讓您控制文字上方和下方的空白，例如 <h1>、<button> 和 <p>。每個字型都會產生不同數量的此區塊方向空間，進而影響元素的大小。這種混亂的空間貢獻很難評估，而且一直無法控制。

字型知道，CSS 也知道！

https://codepen.io/web-dot-dev/pen/xbKjRxL

字型上方和下方的空白是因為網頁的文字排版方式，稱為「半行距」。Matthias Ott 在「The Thing With Leading In CSS」一文中，專業地說明瞭這個問題。基本上，當排版工作由人工完成時，會使用金屬鉛片來分隔文字行。網頁會以此為靈感，將這段引導文字分成兩半，分別放在內容上方和下方。

顯示標題，文字上方和下方會顯示粉紅色列，以顯示半行距。
來源

這個歷程很有意義，因為 text-box 會為每個半數提供名稱：超過和低於。以及裁剪功能。

text-box 也有先前技術，您可能還記得 Ethan Wang 曾發布一篇精彩的文章，名為「Leading-Trim: The Future Of Digital Typesetting」，其中首次介紹了 leading-trim (text-box 先前的名稱)。

標題顯示方式為上方和下方有空白，看起來像是用剪刀剪掉的。

文字修剪作業的切入點可能來自 Figma 和其「垂直修剪」控制項，供設計師使用。這篇 X 文章會說明這個垂直修剪選項的位置，以及它對按鈕的幫助。

來源

無論您是如何來到這裡，這個聽起來不起眼的排版控制項都可能產生巨大影響。

功能和語法總覽

以下是我認為您在使用 text-box 時最常需要的兩個一行程式碼：

h1 {
  /* trim both sides to the capital letters */
  text-box: trim-both cap alphabetic;

  /* trim both sides to the lowercase letter x */
  text-box: trim-both ex alphabetic;
}

這項功能最常見的用途是將兩者都裁剪至 cap alphabetic。以下示範會多次使用這個值。不過，前述範例也顯示 ex alphabetic，因為它可用於以獨特方式平衡光學效果。

探索家遊樂場

您可以透過下列示範探索語法，並使用下拉式選單查看結果。您可以變更字型、變更上限和下限值，並追蹤以顏色編碼的圖像和標籤。

語法探索器示範的螢幕截圖。顯示字型和下拉式選單，可用來選擇其他字型。語法預覽畫面，其中顯示醒目顯示的 text-box: trim-both cap 字母語法。最後，還有 3 個下拉式選單可用來選擇修剪值。

建議做法：

  1. 以視覺化方式檢查 text-box-trim 如何在單行和多行文字變化版本中運作。
  2. 將滑鼠游標懸停在變化版本上，即可查看用於產生該效果的修剪值。
  3. 變更字型。
  4. 只修剪文字方塊的一側。
  5. 在播放時查看語法。
https://codepen.io/web-dot-dev/pen/RNbyooE

我可以用它建構什麼，或解決什麼問題？

這項修剪功能可提供一些更簡單的置中和對齊解決方案。您甚至可以更接近正確的間距，在內容之間使用 gap 之類的字元。

比較 2 組內容。第一組有半行間距，第二組則已裁剪掉行間距。結果是第二個群組的距離較近。
https://codepen.io/web-dot-dev/pen/RNbyoKE

更容易居中對齊

對於較小的內嵌和內容內在元件，padding: 10px 是適合指定元素的合理樣式，可讓元素四面均有相同的間距。不過，由於這類結果頂端和底部通常會多出空白空間，因此可能會讓使用者感到困惑。

為解決這個問題，開發人員通常會在頂端和底部 (區塊) 明確放置較少的邊框間距，以抵銷半寬間距的效果。

button {
  padding-block: 5px;
  padding-inline: 10px;
}

此時，我們必須嘗試不同的值組合，直到視覺上達到居中效果為止。這可能在某個螢幕和作業系統上看起來不錯，但在其他螢幕和作業系統上看起來就不好。

text-box 可讓我們從文字中裁去半個前導空格，讓 10px 等同於邊距值：

button {
  text-box: trim-both cap alphabetic;
  padding: 10px;
}
以下列舉兩個例子。第一個顯示元素的邊框間距為 10 像素和半行高。第二個顯示相同元素，但使用 text-box: trim-both cap alphabetic。結果是第二個按鈕以視覺方式置中。
https://codepen.io/web-dot-dev/pen/NPKMbgq

以下是幾個 <button> 元素，說明如何使用 text-box 修剪空間，讓 padding: 10px 在實際互動元素中四面均等。請注意，替代字型可能會產生截然不同的半行距空間。

畫面上會顯示三組按鈕。第一個群組顯示一般無襯線字型。第二組則顯示華麗或有趣的字體。第三組則是使用手寫字體，呈現相同效果。這點說明每個字型都有不同的半行距空間，但裁剪值相同，可將空間標準化。
https://codepen.io/web-dot-dev/pen/mybLOMg

以下是 <span> 元素，通常用於顯示類別或徽章。另一個使用等邊邊距的情況，應該是最佳解決方案，但在 text-box 之前，我們必須繞過這個問題。

並排顯示標記。第一組有半行間距，第二組則已裁剪掉行間距。結果是第二個群組會更緊密地排列，並在視覺上居中。
https://codepen.io/web-dot-dev/pen/mybLOMg

更容易對齊

文字方塊上方 (over) 和下方 (under) 多出無法控制的半行距，也會造成對齊問題。以下範例說明半行距會在何種情況下導致對齊困難，以及如何修剪文字方塊的區塊邊緣，以便產生更好的對齊效果。

這裡的圖片會顯示在文字旁邊。圖片會依文字需要的高度而增長，但如果沒有 text-box，圖片一律會稍微高一些。有了 text-box，圖片就能與文字內容完美對齊。

https://codepen.io/web-dot-dev/pen/yyBjVpg

請注意，在有換行的情況下，空白會出現在第一行經過格式設定的文字上方，以及最後一行經過格式設定的文字下方。

請注意，在以下範例中，這項功能如何「邏輯地」因應 writing-mode 的變更。嘗試變更文字，觀察版面配置如何繼續保持對齊。

https://codepen.io/web-dot-dev/pen/dPbeOJQ

繼續學習

想瞭解更多資訊嗎？下列連結清單提供各種額外資訊和用途。