CSS text-box-trim

Adam Argyle

發布日期：2025 年 1 月 14 日

從 Chrome 133 開始，開發人員和設計人員可使用 text-box 自訂文字上方和下方的空間。

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: behind a flag.
  • Safari: 18.2.

Source

手寫：

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

簡短說明：

text-box: trim-both cap alphabetic;

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

字型知道，現在 CSS 也知道了。

在 CodePen 上試用

字型上下方的空間是網頁排版文字時產生的，稱為「半行間距」。Matthias Ott 在「The Thing With Leading In CSS」一文中，詳細說明瞭這項功能。基本上，手動排版時會使用鉛金屬片分隔文字行。網頁會受到引導，將引言分成兩部分，並分別放在內容上方和下方。

標題文字的上下方各有一條桃紅色長條，用來示範半行間距。來源

這項記錄很有意義，因為 text-box 會為每個半部提供名稱：上方和下方。此外，還能修剪記錄。

您可能還記得 Ethan Wang 撰寫的這篇精彩文章，當中首次介紹了 leading-trim (text-box 的舊名)。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，因為這在光學平衡方面有其獨特用途。

Explorer 測試區

在我們的遊樂區探索語法，並使用下拉式選單查看結果。您可以變更字型、變更過度修剪和修剪不足的值，並按照顏色編碼的視覺效果和標籤操作。

文字方塊顯示語法預覽畫面：trim-both cap alphabetic 語法已醒目顯示。還有 3 個下拉式選單可供選擇修剪值。

建議嘗試的做法：

  1. 目視檢查 text-box-trim 在單行和多行文字變體中的運作方式。
  2. 將游標懸停在變體上，即可查看用於達到該效果的修剪值。
  3. 變更字型。
  4. 僅修剪文字方塊的一側。
  5. 在播放時查看語法。
在 CodePen 上試用

我可以建立哪些項目？可解決哪些問題？

這項裁剪功能可提供一些簡單得多的置中和對齊解決方案。您甚至可以更接近適當的行距，例如在內容之間使用 gap。

比較 2 組內容。
第一個群組有半行間距，第二個群組則有修剪過的行間距。結果是第二個群組更緊密。在 CodePen 上試用

更輕鬆置中

對於較小、更內嵌且內容固有的元件，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。結果是第二個按鈕在視覺上置中。 在 CodePen 上試試看

以下幾個 <button> 元素顯示如何使用 text-box 修剪空間，讓實用的互動元素中的 padding: 10px 在各邊看起來相等。請注意，替代字型可能會產生一些差異極大的半行間距。

三組按鈕。第一組使用一般無襯線字型，第二組使用花俏或有趣的字型，第三組使用相同效果，但採用手寫字型。
每種字型的半行間距不同，但裁剪值相同，因此可以將間距標準化。 在 CodePen 上試用

以下是 <span> 元素，通常用於顯示類別或徽章。在另一個時刻，等邊間距應該是最佳解決方案，但直到 text-box 我們都必須解決這個問題。

系統會並排顯示標記，第一組的行間距為一半，第二組的行間距則經過修剪。
第二組標記更緊密，且在視覺上置中，這是因為開頭已修剪。

更輕鬆對齊

文字方塊上方 (over) 和下方 (under) 的額外半行間距無法控制，也會導致對齊困難。以下範例說明半行間距可能導致對齊困難的情況，以及如何修剪文字方塊的區塊兩側，以建立更佳的對齊方式。

這裡的圖片會放在文字旁邊，並根據文字需求調整高度。如果沒有 text-box，圖片高度一律會比文字高一點。有了 text-box，圖片就能與文字內容完美對齊。

在 CodePen 上試用

請注意，在換行情境中，空白字元會出現在第一個格式化文字行的上方，以及最後一個格式化文字行的下方。

在以下範例中，請注意這項功能如何在邏輯上適應 writing-mode 的變化。請嘗試變更文字，看看版面配置如何持續對齊。

在 CodePen 上試用

繼續學習

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