text-box

構成屬性

此屬性是以下 CSS 屬性的簡寫：

• text-box-trim
• text-box-edge

語法

/* Single keyword */
text-box: normal;

/* One text-box-edge keyword */
text-box: trim-start text;
text-box: trim-both text;

/* Two text-box-edge keywords */
text-box: trim-start cap alphabetic;
text-box: trim-both ex text;

/* Global values */
text-box: inherit;
text-box: initial;
text-box: revert;
text-box: revert-layer;
text-box: unset;

值

text-box 值可以由一個 text-box-trim 值和一個 text-box-edge 值組成，它們之間用空格分隔。有關值的描述，請參閱這些頁面。

text-box 屬性也可以接受關鍵字 normal，它等同於 text-box: none auto;

如果省略了 text-box-trim，它將被設定為 trim-both。如果省略了 text-box-edge，它將被設定為 auto。

正式定義

正式語法

text-box = 
  normal                                  |
  <'text-box-trim'> || <'text-box-edge'>  

<text-box-trim> = 
  none        |
  trim-start  |
  trim-end    |
  trim-both   

<text-box-edge> = 
  auto         |
  <text-edge>  

<text-edge> = 
  [ text | ideographic | ideographic-ink ]            |
  [ text | ideographic | ideographic-ink | cap | ex ] [ text | ideographic | ideographic-ink | alphabetic ]  

描述

純文字內容的高度與字型高度相關。在數字字型檔案中，高度包含所有字元，包括大寫字母、上行字元、下行字元等。不同的字型有不同的基線高度，這意味著具有相同 font-size 的文字行會產生不同高度的行框，從而影響行間距的外觀。

text-box 屬性可以從文字元素的塊容器的塊起始邊緣和塊結束邊緣修剪多餘的間距，這可以包括文字塊起始邊緣和塊結束邊緣的行距，以及字型內部定義的間距（如上所述）。這使得在塊方向上控制文字間距變得更加容易。

示例

text-box 的基本用法

在下面的示例中，我們有兩個帶有 one 和 two 類的 <p> 元素。

我們對第一個段落應用 text-box 值 trim-end cap alphabetic。 text-box-edge 值 cap alphabetic 指定將上邊緣修剪到大寫字母的頂部，下邊緣與文字基線齊平。由於 text-box-trim 值設定為 trim-end，因此只修剪段落的下邊緣。

我們對第二個段落應用 text-box 值 trim-both ex alphabetic。 text-box-edge 值 ex alphabetic 指定將上邊緣修剪到字型的 x 高度（短小寫字母的頂部邊緣），下邊緣與文字基線齊平。由於 text-box-trim 值設定為 trim-both，因此段落的上下邊緣都被修剪。

<p class="one">This is .one</p>

<p class="two">This is .two</p>

html {
  font-family: sans-serif;
  height: 100%;
}

body {
  height: inherit;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 100px;
}

p {
  margin: 0;
  font-size: 6rem;
  font-weight: bold;
}

.one {
  text-box: trim-end cap alphabetic;
}

.two {
  text-box: trim-both ex alphabetic;
}

p {
  border-top: 5px solid magenta;
  border-bottom: 5px solid magenta;
}

結果

輸出如下。請注意，我們為每個段落添加了頂部和底部邊框，以便您可以看到在每種情況下空間是如何被修剪的。

規範

瀏覽器相容性

另見

• text-box-edge, text-box-trim
• <text-edge> 資料型別
• CSS 內聯佈局模組
• CSS text-box-edge on developer.chrome.com (2025)