CSS text-box-trim

从文本内容上方和下方留出空间，实现视觉平衡。

Adam Argyle

发布时间：2025 年 1 月 14 日

从 Chrome 133 开始，text-box 可让开发者和设计师调整文本上方和下方的空格。

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: not supported.
  • Safari: 18.2.

手写：

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

简写：

text-box: trim-both cap alphabetic;

借助此属性，您可以控制文本上方和下方的空格，例如 <h1>、<button> 和 <p>。每种字体都会产生不同数量的此块方向空间，这会影响元素的大小。这种混乱的空间贡献很难衡量，而且到目前为止也无法控制。

字体知道了，现在 CSS 也知道了！

https://codepen.io/web-dot-dev/pen/xbKjRxL

字体上方和下方的空格是由于网页排版方式而产生的，称为“半空格”。Matthias Ott 在其名为 The Thing With Leading In CSS 的帖子中对此进行了专业介绍。从本质上讲，手动排版时，人们使用铅块来分隔文本行。网站受到前导文字的启发，将该前导文字一分为二，分别放置在内容上方和下方。

标题显示在文本上方和下方，并带有热粉色条，以显示半角空格。
来源

此历史记录很有意义，因为 text-box 为我们提供了每半部分的名称：上限和下限。此外，还可以剪掉多余的部分。

text-box 也有先前技术，您可能还记得 Ethan Wang 撰写的一篇名为 Leading-Trim: The Future Of Digital Typesetting 的激动人心文章，其中首次介绍了 leading-trim（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，因为它以自己独特的方式有助于实现光学平衡。

探索器游乐场

在以下演示中，您可以探索语法，并使用下拉菜单查看结果。您可以更改字体、更改上限和下限值，并跟随颜色编码的视觉效果和标签。

语法探索器演示的屏幕截图。显示字体和用于选择其他字体的下拉菜单。语法预览，其中突出显示了 text-box: trim-both cap 字母语法。最后，还有 3 个下拉菜单可用于选择修剪值。

可尝试的操作：

  1. 直观地检查 text-box-trim 如何在单行和多行文本变体中运作。
  2. 将鼠标悬停在某个变体上，查看用于实现该效果的修剪值。
  3. 更改字体。
  4. 仅修剪文本框的一侧。
  5. 边玩边查看语法。
https://codepen.io/web-dot-dev/pen/RNbyooE

我可以用它构建什么内容或解决什么问题？

借助此修剪功能，您可以使用一些更简单的居中和对齐解决方案。您甚至可以更接近正确的排版，在内容之间使用 gap 等内容。

系统会显示 2 组内容之间的对比情况。第一个组使用了半角空格，第二个组使用了经过修剪的空格。结果是第二组更紧密。
https://codepen.io/web-dot-dev/pen/RNbyoKE

更轻松地居中

对于更小、更内嵌且内容内在的组件，padding: 10px 是一种合理的样式，可用于为元素指定所有边均等间距。不过，由于顶部和底部通常会多出一些空白，因此结果可能会让用户感到困惑。

为了解决此问题，开发者通常会明确减少顶部和底部（块）的内边距，以抵消半个内边距的影响。

button {
  padding-block: 5px;
  padding-inline: 10px;
}

此时，我们需要尝试各种值组合，直到视觉中心对齐。这在某个屏幕和操作系统上可能看起来不错，但在另一个屏幕和操作系统上可能看起来很糟糕。

借助 text-box，我们可以从文本中剪除前半个空格，从而使 10px 等等距内边距值发挥作用：

button {
  text-box: trim-both cap alphabetic;
  padding: 10px;
}
下面显示了两个示例。第一个显示的元素具有内边距：10px 和半角空格。第二个显示了使用 text-box: trim-both cap alphabetic 的同一元素。结果是，第二个按钮在视觉上居中。
https://codepen.io/web-dot-dev/pen/NPKMbgq

以下是一些 <button> 元素，展示了如何使用 text-box 修剪空格，使 padding: 10px 在实用互动元素中四面看起来均等。请注意，备选字体可能会产生完全不同的半角空格。

系统会显示三组按钮。第 1 组显示的是常规的无衬线字体。第二组显示的是花哨或有趣的字体。第三组显示了相同的效果，但使用了手写字体。目的是展示每个字体的半角空格不同，但修剪值相同，并且可以对空格进行标准化。
https://codepen.io/web-dot-dev/pen/mybLOMg

以下是 <span> 元素，通常用于显示类别或徽章。在另一种情况下，等边内边距应该是最佳解决方案，但在 text-box 之前，我们不得不想办法解决这个问题。

系统会并排显示标签。第一个组使用了半角空格，第二个组使用了经过修剪的空格。结果是，第二组更紧密地排列在一起，并且在光学中心。
https://codepen.io/web-dot-dev/pen/mybLOMg

对齐更简单

文本框上方 (over) 和下方 (under) 多出的不可控的半个前导空格也使得对齐变得困难。以下示例展示了在什么情况下半角空格会导致对齐困难，以及如何修剪文本框的边线以实现更好的对齐。

此处图片位于文字旁边。图片会扩大到文字所需的高度，但如果不使用 text-box，图片总是会稍高一些。使用 text-box 时，图片可以与文本内容完美对齐。

https://codepen.io/web-dot-dev/pen/yyBjVpg

请注意，在采用换行的情况中，空白位于格式化文本的第一行上方和最后一行下方。

在以下示例中，请注意该功能如何合理地适应 writing-mode 的更改。尝试更改文本，观察布局如何保持对齐。

https://codepen.io/web-dot-dev/pen/dPbeOJQ

继续学习

希望了解更多信息？以下链接列表提供了各种额外信息和用例。