text-box-edge

語法

/* Single keyword */
text-box-edge: auto;
text-box-edge: text;

/* Two <text-edge> values */
text-box-edge: text text;
text-box-edge: text alphabetic;
text-box-edge: cap alphabetic;
text-box-edge: ex text;

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

值

text-box-edge 屬性值被指定為 auto 或 <text-edge> 值。

auto

預設值。等同於 text-edge 值 text。

<text-edge>

一個或兩個單獨的關鍵字，表示用於裁剪文字元素塊容器的上方和下方邊緣位置。

• 如果指定了兩個值，則第一個值指定應用於文字的塊起始（上方）邊緣的裁剪行為，第二個值指定應用於文字的塊結束（下方）邊緣的裁剪行為。
  • 有效的上方邊緣裁剪值：text、cap 和 ex。
  • 有效的下方邊緣裁剪值：text 和 alphabetic。
• 如果指定一個值，它指定上方和下方邊緣的裁剪行為。在撰寫本文時，唯一有效的單個值是 text。

描述

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

text-box-edge 屬性允許您從文字塊容器的起始和/或結束邊緣裁剪空間。這可以包括文字塊起始邊緣和塊結束邊緣的行距以及字型內部定義的間距（如上所述）。它透過指定一個 <text-edge> 值來完成此操作，該值指示要裁剪到哪個上方邊緣和下方邊緣。

使用 text-box-trim 屬性指定要從哪個（哪些）邊緣裁剪空間。例如，您可以選擇從文字塊容器的上方邊緣、下方邊緣或兩者同時裁剪空間。

這些屬性使得在塊方向上控制文字間距變得容易得多。

正式定義

正式語法

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

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

示例

text-box-edge 的基本用法

對於水平 writing-mode 語言（例如英語或阿拉伯語），您最常用的 text-box-edge 值是 cap alphabetic 和 ex alphabetic。cap 值將文字元素塊容器的上方邊緣裁剪到大寫字母的頂部，而 ex 值將上方邊緣裁剪到字型的 x 高度（短小寫字母的頂部邊緣）。在每種情況下，alphabetic 值將下方邊緣與文字基線齊平。

在此示例中，我們演示了這些常用值對兩個 <p> 元素的影響。此外，我們在這兩個元素上都設定了 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;
}

p {
  text-box-trim: trim-both;
  border-top: 5px solid magenta;
  border-bottom: 5px solid magenta;
}

.one {
  text-box-edge: cap alphabetic;
}

.two {
  text-box-edge: ex alphabetic;
}

結果

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

互動式 text-box-edge 值比較

有關完整的互動式 text-box-edge 示例，請參閱 text-box-trim 頁面。

規範

瀏覽器相容性

另見

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