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)