CSS 文本框修剪 CSS Text Box Trim

CSS 文本框修剪是一种 CSS 属性，可用于去除文本块的前导空白。这对于去除文本顶部与容器顶部之间的空白非常有用。

🚨 text-box-trim 是 leading-trim 的新名称: w3c/csswg-drafts#8067 (comment)

用法

.text-box-trim {
  text-box-trim: both;
  text-box-edge: cap alphabetic;
}

demo

text-box-trim 现在只在 Safari 技术预览版中使用旧的 leading-trim 名称。
但你现在就可以在这个示例中试用它。

示例

text-box-edges

button

subgrid gap 

文本边缘（Text Edge）值

text-box-edge 值基于字体的 OpenType 元数据。也可以使用 css 定义这些值：https://www.w3.org/TR/css-fonts-5/#font-metrics-override-desc

不同文本框边缘值的可视化：

text-box-edge: normal

text-box-edge: text

text-box-edge: ex

text-box-edge: ex alphabetic

text-box-edge: cap

text-box-edge: cap alphabetic

text-box-edge: ideographic

text-box-edge: ideographic ideographic-ink

text-box-edge: ideographic-ink

text-box-edge: ideographic-ink ideographic

浏览器支持情况

• Can I use
• WebPlatformTests

访谈

起源

Initial idea from October 2018

提议

w3c/csswg-drafts#3240 https://www.w3.org/TR/css-inline-3/#propdef-text-box-trim

使用场景

下面是一些可以使用该属性的情况：

将按钮中的文字居中

button {
    padding: 6px
}

通过 text-box-trim:

button {
  text-box-trim: both;
  text-box-edge: cap alphabetic;
  padding: 10px
}

间距系统

大多数设计系统都有一个基于基本单位倍数的间距系统。例如，间距系统的基本单位可能是 4px，然后是该单位的倍数，如 8px、12px、16px 等。这是确保整个设计系统间距一致的好方法。

但是，增加的行高会破坏间距系统：

图标 Icons

图标与文本对齐是一个常见问题。通过前导修剪，您可以将图标与文本对齐：

图片

在文章中，图片通常被放置在图片旁边。通过前导修剪属性，可以删除文本上方的空白，使文本与图片对齐。

艺术作品

特别是在徽标设计和艺术设计中，导边可用于创建对齐的不同文字元素：