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中文網其他相關文章！
