CSS 的 text-box-trim 和 text-box-edge 属性让开发者可以精确控制文本框中首行文本上方和末行文本下方的空白量。这些空白会使文本框的垂直高度大于其内容高度。
这种空白被称为 leading（行距），它出现在所有文本行之上和之下（实际上是两个半行距），以提高文本的可读性。但是，我们只希望它出现在文本行之间，对吧？我们不希望它出现在文本框的上下边缘，因为它会影响我们的边距、填充、间隙和其他间距。
例如，如果我们实现 50px 的边距，但行距又增加了 37px，最终总共会有 87px 的空间。然后我们需要将边距调整为 13px，才能在实际中使空间为 50px。
作为一名设计系统人员，我尽量保持尽可能多的一致性，并尽可能少地使用标记，这使我能够使用相邻兄弟选择器 ( ) 来创建这样的通用规则：
/* 当 <element> 后面跟着 <h1> 时 */
<element> + h1 {
margin-bottom: 13px; /* 而不是 margin-bottom: 50px; */
}</element>
</h1></element>这种方法仍然很麻烦，因为你仍然需要进行计算（尽管计算量较少）。但是，使用 text-box-trim 和 text-box-edge 属性，CSS 中定义的 50px 在视觉上就意味着 50px：
免责声明：text-box-trim 和 text-box-edge 只能通过 Chrome 128 和 Safari 16.4 的特性标志访问，以及无需特性标志的 Safari 技术预览版。请参阅 Caniuse 获取最新的浏览器支持信息。
text-box-trim 开始text-box-trim 是一个激活文本框修剪的 CSS 属性。它本身没有其他用途，但它确实为我们提供了从开头、结尾、开头和结尾或都不修剪的选项：
text-box-trim: trim-start; text-box-trim: trim-end; text-box-trim: trim-both; text-box-trim: none;
注意：在较旧的 Web 浏览器中，您可能需要使用较旧的 start/end/both 值来代替新的 trim-start/trim-end/trim-both 值。在更旧的 Web 浏览器中，您可能需要使用 top/bottom/both。不幸的是，对此没有参考，因此您只需要查看什么有效即可。
你可能想知道我的意思。考虑一下，一个排版字母有多个峰值。
有 x 高度，它标记字母“x”和其他小写字符的顶部（不包括升部或上伸部），大写高度，它标记大写字符的顶部（同样，不包括升部或上伸部），以及字母基线，它标记大多数字母的底部（不包括降部或下伸部）。当然还有升部高度和降部高度。
您可以修剪 x 高度、大写高度或升部高度与文本框“上”边缘（这是上划线开始的地方）之间的空白，以及字母基线或降部高度与“下”边缘（如果 text-underline-position 设置为 under，则下划线开始的地方）之间的空白。
text-box-edge: leading 表示包含所有行距；简单地说，不要修剪任何内容。这与 text-box-trim: none 或完全省略 text-box-trim 和 text-box-edge 的效果相同。您还可以使用 text-box-trim: trim-start 限制下边缘修剪或使用 text-box-trim: trim-end 限制上边缘修剪。是的，有很多方法根本不做这件事！
较新的 Web 浏览器已经偏离了 CSSWG 规范工作草案，通过删除 leading 值并用 auto 替换它，尽管有“不要发布（尚未）”警告（*耸肩*）。
当然，text-box-edge 接受两个值（关于上边缘的指令，然后是关于下边缘的指令）。但是，auto 必须单独使用。
/* 当 <element> 后面跟着 <h1> 时 */
<element> + h1 {
margin-bottom: 13px; /* 而不是 margin-bottom: 50px; */
}</element>
</h1></element>我可以解释 auto 有效的所有场景，但没有一个是有效的。我认为我们想要的只是能够将上边缘或下边缘设置为 auto，并将另一个边缘设置为其他内容，但这正是它唯一没有做到的。这是一个问题，但我们很快就会深入探讨。
text 值如果用作第一个值，则会修剪升部上方；如果用作第二个值，则会修剪降部下方；如果未声明第二个值，它也是默认值。（我认为你希望它是 auto，但它不会是。）
text-box-trim: trim-start; text-box-trim: trim-end; text-box-trim: trim-both; text-box-trim: none;
值得注意的是，升部和降部高度度量来自字体本身（或不是！），因此 text 可能非常挑剔。例如，对于 Arial 字体，升部高度包括变音符号，降部高度包括降部，而对于 Fraunces 字体，降部高度包括变音符号，我不知道升部高度包括什么。因此，有人在讨论将 text 重命名为 from-font。
要修剪大写高度上方：
text-box-edge: auto; /* Works */ text-box-edge: ex auto; /* Doesn't work */ text-box-edge: auto alphabetic; /* Doesn't work */
记住，未声明的值默认为 text，而不是 auto（如上所示）。因此，要选择不修剪下边缘，您需要使用 trim-start 而不是 trim-both：
text-box-edge: ex text; /* Valid */ text-box-edge: ex; /* Computed as `text-box-edge: ex text;` */ text-box-edge: text alphabetic; /* Valid */ text-box-edge: text text; /* Valid */ text-box-edge: text; /* Computed as `text-box-edge: text text;` */
要修剪大写高度上方和字母基线下方：
/* 当 <element> 后面跟着 <h1> 时 */
<element> + h1 {
margin-bottom: 13px; /* 而不是 margin-bottom: 50px; */
}</element>
</h1></element>顺便说一下，Figma 的“垂直修剪”设置的“大写高度到基线”选项正是这样做的。但是，它的开发模式会生成具有过时属性名称（leading-trim 和 text-edge）和过时值（top 和 bottom）的 CSS 代码。
要仅修剪 x 高度上方：
text-box-trim: trim-start; text-box-trim: trim-end; text-box-trim: trim-both; text-box-trim: none;
要修剪 x 高度上方和字母基线下方：
text-box-edge: auto; /* Works */ text-box-edge: ex auto; /* Doesn't work */ text-box-edge: auto alphabetic; /* Doesn't work */
要仅修剪字母基线下方，以下无效（事情进行得如此顺利，不是吗？）：
text-box-edge: ex text; /* Valid */ text-box-edge: ex; /* Computed as `text-box-edge: ex text;` */ text-box-edge: text alphabetic; /* Valid */ text-box-edge: text text; /* Valid */ text-box-edge: text; /* Computed as `text-box-edge: text text;` */
这是因为第一个值始终是必需的上边缘值，而第二个值是可选的下边缘值。这意味着 alphabetic 不是有效的上边缘值，即使包含 trim-end 表明我们不会提供一个。除了冗长性的抱怨之外，正确的语法会让你声明任何上边缘值，即使你实际上会用 trim-end 取消它：
text-box-edge: cap; /* Computed as text-box-edge: cap text; */
在 Web 浏览器修剪象形文字之前，很难知道它们将如何修剪，但您可以在规范中阅读所有相关内容。理论上，您需要使用 ideographic-ink 值进行修剪，使用 ideographic 值不进行修剪，两者目前都不受支持：
text-box-trim: trim-start; /* Not text-box-trim: trim-both; */ text-box-edge: cap; /* Not computed as text-box-edge: cap text; */
text-box，简写属性如果您不喜欢文本框修剪的冗长性，则有一个简写 text-box 属性使其变得不太重要。所有相同的规则都适用。
text-box-trim: trim-both; text-box-edge: cap alphabetic;
乍一看，text-box-trim 和 text-box-edge 可能看起来并不那么有趣，但它们确实使间距元素变得简单得多。
但是，目前的提案是否是处理文本框修剪的最佳方法？就我个人而言，我认为不是。我认为 text-box-trim-start 和 text-box-trim-end 会更有意义，text-box-trim 用作简写属性，而 text-box-edge 完全不用，但我愿意接受一些简化和/或一致的做法。你怎么看？
还有一些其他的担忧。例如，是否应该有一个选项来包含下划线、上划线、悬挂标点符号或变音符号？我会说是的，特别是如果您使用的是 text-underline-position: under 或特别厚的 text-decoration-thickness，因为它们会使元素之间的间距看起来更小。
以上是两个CSS属性，用于修剪文本框的详细内容。更多信息请关注PHP中文网其他相关文章！
