CSS 的 text-box-trim 和 text-box-edge 屬性讓開發(fā)者可以精確控製文本框中首行文本上方和末行文本下方的空白量。這些空白會使文本框的垂直高度大於其內(nèi)容高度。

這種空白被稱為 leading（行距），它出現(xiàn)在所有文本行之上和之下（實(shí)際上是兩個半行距），以提高文本的可讀性。但是，我們只希望它出現(xiàn)在文本行之間，對吧？我們不希望它出現(xiàn)在文本框的上下邊緣，因?yàn)樗鼤绊懳覀兊倪吘?、填充、間隙和其他間距。

例如，如果我們實(shí)現(xiàn) 50px 的邊距，但行距又增加了 37px，最終總共會有 87px 的空間。然後我們需要將邊距調(diào)整為 13px，才能在實(shí)際中使空間為 50px。

作為一名設(shè)計系統(tǒng)人員，我盡量保持盡可能多的一致性，並儘可能少地使用標(biāo)記，這使我能夠使用相鄰兄弟選擇器 ( ) 來創(chuàng)建這樣的通用規(guī)則：

/* 當(dāng) <element> 后面跟著 <h1> 時 */
<element> + h1 {
  margin-bottom: 13px; /* 而不是 margin-bottom: 50px; */
}</element>
</h1></element>

這種方法仍然很麻煩，因?yàn)槟闳匀恍枰M(jìn)行計算（儘管計算量較少）。但是，使用 text-box-trim 和 text-box-edge 屬性，CSS 中定義的 50px 在視覺上就意味著 50px：

免責(zé)聲明：text-box-trim 和 text-box-edge 只能通過 Chrome 128 和 Safari 16.4 的特性標(biāo)誌訪問，以及無需特性標(biāo)誌的 Safari 技術(shù)預(yù)覽版。請參閱 Caniuse 獲取最新的瀏覽器支持信息。

從 text-box-trim 開始

text-box-trim 是一個激活文本框修剪的 CSS 屬性。它本身沒有其他用途，但它確實(shí)為我們提供了從開頭、結(jié)尾、開頭和結(jié)尾或都不修剪的選項(xiàng)：

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。不幸的是，對此沒有參考，因此您只需要查看什麼有效即可。

現(xiàn)在，你想從哪裡修剪？

你可能想知道我的意思?？紤]一下，一個排版字母有多個峰值。

有 x 高度，它標(biāo)記字母“x”和其他小寫字符的頂部（不包括升部或上伸部），大寫高度，它標(biāo)記大寫字符的頂部（同樣，不包括升部或上伸部），以及字母基線，它標(biāo)記大多數(shù)字母的底部（不包括降部或下伸部）。當(dāng)然還有升部高度和降部高度。

您可以修剪 x 高度、大寫高度或升部高度與文本框“上”邊緣（這是上劃線開始的地方）之間的空白，以及字母基線或降部高度與“下”邊緣（如果 text-underline-position 設(shè)置為 under，則下劃線開始的地方）之間的空白。

不要修剪任何內(nèi)容

text-box-edge: leading 表示包含所有行距；簡單地說，不要修剪任何內(nèi)容。這與 text-box-trim: none 或完全省略 text-box-trim 和 text-box-edge 的效果相同。您還可以使用 text-box-trim: trim-start 限制下邊緣修剪或使用 text-box-trim: trim-end 限制上邊緣修剪。是的，有很多方法根本不做這件事！

較新的 Web 瀏覽器已經(jīng)偏離了 CSSWG 規(guī)範(fàn)工作草案，通過刪除 leading 值並用 auto 替換它，儘管有“不要發(fā)布（尚未）”警告（*聳肩*）。

當(dāng)然，text-box-edge 接受兩個值（關(guān)於上邊緣的指令，然後是關(guān)於下邊緣的指令）。但是，auto 必須單獨(dú)使用。

/* 當(dāng) <element> 后面跟著 <h1> 時 */
<element> + h1 {
  margin-bottom: 13px; /* 而不是 margin-bottom: 50px; */
}</element>
</h1></element>

我可以解釋 auto 有效的所有場景，但沒有一個是有效的。我認(rèn)為我們想要的只是能夠?qū)⑸线吘壔蛳逻吘壴O(shè)置為 auto，並將另一個邊緣設(shè)置為其他內(nèi)容，但這正是它唯一沒有做到的。這是一個問題，但我們很快就會深入探討。

修剪升部上方和/或降部下方

text 值如果用作第一個值，則會修剪升部上方；如果用作第二個值，則會修剪降部下方；如果未聲明第二個值，它也是默認(rèn)值。 （我認(rèn)為你希望它是 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 */

記住，未聲明的值默認(rèn)為 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;` */

修剪大寫高度上方和字母基線下方

要修剪大寫高度上方和字母基線下方：

/* 當(dāng) <element> 后面跟著 <h1> 時 */
<element> + h1 {
  margin-bottom: 13px; /* 而不是 margin-bottom: 50px; */
}</element>
</h1></element>

順便說一下，F(xiàn)igma 的“垂直修剪”設(shè)置的“大寫高度到基線”選項(xiàng)正是這樣做的。但是，它的開發(fā)模式會生成具有過時屬性名稱（leading-trim 和 text-edge）和過時值（top 和 bottom）的 CSS 代碼。

僅修剪 x 高度上方

要僅修剪 x 高度上方：

text-box-trim: trim-start;
text-box-trim: trim-end;
text-box-trim: trim-both;
text-box-trim: none;

修剪 x 高度上方和字母基線下方

要修剪 x 高度上方和字母基線下方：

text-box-edge: auto; /* Works */
text-box-edge: ex auto; /* Doesn't work */
text-box-edge: auto alphabetic; /* Doesn't work */

僅修剪字母基線下方

要僅修剪字母基線下方，以下無效（事情進(jìn)行得如此順利，不是嗎？）：

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;` */

這是因?yàn)榈谝粋€值始終是必需的上邊緣值，而第二個值是可選的下邊緣值。這意味著 alphabetic 不是有效的上邊緣值，即使包含 trim-end 表明我們不會提供一個。除了冗長性的抱怨之外，正確的語法會讓你聲明任何上邊緣值，即使你實(shí)際上會用 trim-end 取消它：

text-box-edge: cap; /* Computed as text-box-edge: cap text; */

象形文字呢？

在 Web 瀏覽器修剪象形文字之前，很難知道它們將如何修剪，但您可以在規(guī)範(fàn)中閱讀所有相關(guān)內(nèi)容。理論上，您需要使用 ideographic-ink 值進(jìn)行修剪，使用 ideographic 值不進(jìn)行修剪，兩者目前都不受支持：

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 屬性使其變得不太重要。所有相同的規(guī)則都適用。

text-box-trim: trim-both;
text-box-edge: cap alphabetic;

最後的想法

乍一看，text-box-trim 和 text-box-edge 可能看起來並不那麼有趣，但它們確實(shí)使間距元素變得簡單得多。

但是，目前的提案是否是處理文本框修剪的最佳方法？就我個人而言，我認(rèn)為不是。我認(rèn)為 text-box-trim-start 和 text-box-trim-end 會更有意義，text-box-trim 用作簡寫屬性，而 text-box-edge 完全不用，但我願意接受一些簡化和/或一致的做法。你怎麼看？

還有一些其他的擔(dān)憂。例如，是否應(yīng)該有一個選項(xiàng)來包含下劃線、上劃線、懸掛標(biāo)點(diǎn)符號或變音符號？我會說是的，特別是如果您使用的是 text-underline-position: under 或特別厚的 text-decoration-thickness，因?yàn)樗鼈儠乖刂g的間距看起來更小。

以上是兩個CSS屬性，用於修剪文本框的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！