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)