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;
line-fit-edge: alphabetic | text;

簡寫：

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 會為每個半數提供名稱：over 和 under。以及裁剪功能。

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 大寫字母語法。最後，還有 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

繼續學習

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