text-box-trim

可用性有限

此特性不是基線特性，因為它在一些最廣泛使用的瀏覽器中不起作用。

text-box-trim CSS 屬性指定要從文字元素的塊容器中裁剪文字內容的上方和下方邊緣。

不同字型之間的垂直間距不同，這使得在網路上實現一致的排版歷來具有挑戰性。text-box-trim 屬性 — 及其對應的屬性 text-box-edge（它指定要裁剪多少空間）— 使文字垂直間距更容易實現一致。

注意： text-box 簡寫屬性可用於在單個宣告中指定 text-box-trim 和 text-box-edge 值。

語法

css

/* Keywords */
text-box-trim: none;
text-box-trim: trim-both;
text-box-trim: trim-start;
text-box-trim: trim-end;

/* Global values */
text-box-trim: inherit;
text-box-trim: initial;
text-box-trim: revert;
text-box-trim: revert-layer;
text-box-trim: unset;

值

text-box-trim 屬性值可以指定為以下關鍵字之一：

none: 預設值。不裁剪文字中的任何空間。
trim-both: 開始（上方）和結束（下方）邊緣都裁剪。
trim-start: 開始（上方）邊緣裁剪。
trim-end: 結束（下方）邊緣裁剪。

描述

純文字內容的高度與字型高度相關。在數字字型檔案中，高度包含所有字元，包括大寫字母、上行字元、下行字元等。不同的字型有不同的基線高度，這意味著具有相同 font-size 的文字行會產生不同高度的行框，從而影響行間距的外觀。

text-box-trim 屬性允許您裁剪文字塊容器的上方和下方邊緣，從而更容易控制塊方向上的文字間距。

實際裁剪的空間量是使用 text-box-edge 屬性指定的。例如，您可以選擇將上方邊緣與字型的首字母或小寫字母對齊裁剪，並將下方邊緣與字型的基線對齊裁剪。

正式定義

初始值	`none`
應用於	塊容器和內聯框
繼承性	否
計算值	指定的關鍵字
動畫型別	離散

正式語法

text-box-trim = 
  none        |
  trim-start  |
  trim-end    |
  trim-both

示例

`text-box-trim` 基本用法

在以下示例中，我們為兩個段落設定 text-box-edge: cap alphabetic，這將文字元素塊容器的上方邊緣裁剪到大寫字母的頂部，並將下方邊緣與文字基線對齊裁剪。

然後，我們為第一個段落設定 trim-end 的 text-box-trim 值，為第二個段落設定 trim-both。這導致第一個段落僅裁剪其下方邊緣，而第二個段落裁剪上方和下方邊緣。

<p class="one">This is .one</p>

<p class="two">This is .two</p>

html {
  font-family: sans-serif;
  height: 100%;
}

body {
  height: inherit;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 100px;
}

p {
  margin: 0;
  font-size: 6rem;
  font-weight: bold;
}

css

p {
  text-box-edge: cap alphabetic;
  border-top: 5px solid magenta;
  border-bottom: 5px solid magenta;
}

.one {
  text-box-trim: trim-end;
}

.two {
  text-box-trim: trim-both;
}

結果

輸出如下。請注意，我們為每個段落添加了頂部和底部邊框，以便您可以看到在每種情況下空間是如何被修剪的。

互動式 `text-box-trim` 和 `text-box-edge` 值比較

在此示例中，我們提供了一個使用者介面，允許您選擇應用於文字段落的 text-box-trim 和 text-box-edge 值。

HTML

在我們的 HTML 中，我們包含三個主要專案：

三個 <select> 元素，允許您設定段落的哪些邊緣應裁剪（text-box-trim 值）以及從段落的塊開始和塊結束邊緣裁剪多少空間（text-box-edge 值）。
一個包含文字的 <p> 元素，應用 text-box-* 值。此段落設定了 contenteditable，因此您可以編輯文字。
一個 <output> 元素，顯示應用於段落的 text-box-* 宣告。這在進行選擇時會更新。

我們還從 Google Fonts 服務匯入了一種字型以應用於我們演示的文字。

為簡潔起見，我們隱藏了精確的 HTML 程式碼。

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
  rel="stylesheet" />
<section>
  <div>
    <label for="box-trim">Select edge(s) to trim:</label>
    <select id="box-trim">
      <option>none</option>
      <option>trim-start</option>
      <option>trim-end</option>
      <option selected>trim-both</option>
    </select>
  </div>
  <div>
    <label for="trim-over">Select trim over (start) value:</label>
    <select id="trim-over">
      <option>text</option>
      <option selected>cap</option>
      <option>ex</option>
    </select>
  </div>
</section>
<p class="display" contenteditable="">Holly Golightly</p>
<section>
  <div>
    <label for="trim-under">Select trim under (end) value:</label>
    <select id="trim-under">
      <option>text</option>
      <option selected>alphabetic</option>
    </select>
  </div>
</section>
<output></output>

CSS

在我們的 CSS 中，我們將匯入的字型應用於 <html> 元素，並使用 flexbox 佈置 UI。為簡潔起見，我們隱藏了大部分 CSS 程式碼，但下面顯示了用於設定應用 text-box-* 效果的段落和顯示正在應用的 text-box-* 規則的 <output> 的樣式規則：

html {
  font-family: "Roboto", sans-serif;
  height: 100%;
}

body {
  height: inherit;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 30px;
}

section {
  display: flex;
  justify-content: space-between;
}

section:nth-of-type(2) {
  justify-content: flex-end;
  padding-bottom: 30px;
}

select {
  width: 6rem;
}

css

p {
  margin: 0;
  font-size: 6rem;
  font-weight: bold;
  border-top: 5px solid magenta;
  border-bottom: 5px solid magenta;
}

output {
  border: 2px solid gray;
  border-radius: 10px;
  padding: 10px;
  margin: 0;
  width: fit-content;
}

再次注意，我們如何在 .display 段落上包含頂部和底部邊框，以便您可以看到選擇不同的 text-box-* 值時裁剪空間如何變化。

JavaScript

在 JavaScript 中，我們首先獲取對三個 <select> 元素和兩個 <p> 元素的引用：

const boxTrimSelect = document.getElementById("box-trim");
const trimOverSelect = document.getElementById("trim-over");
const trimUnderSelect = document.getElementById("trim-under");

const displayElem = document.querySelector("p");
const codeElem = document.querySelector("output");

接下來，我們定義一個名為 setEdgeTrim() 的函式。它根據 <select> 元素的值將 text-box 值應用於段落，並將應用的宣告列印到輸出（包括長格式和簡寫格式）

function setEdgeTrim() {
  const textBoxTrimValue = boxTrimSelect.value;
  const textBoxEdgeValue = `${trimOverSelect.value} ${trimUnderSelect.value}`;
  displayElem.style.textBox = `${textBoxTrimValue} ${textBoxEdgeValue}`;

  codeElem.innerHTML = `
    <span><code>text-box-trim: ${textBoxTrimValue}</code></span>
    <br>
    <span><code>text-box-edge: ${textBoxEdgeValue}</code></span>
    <br><br>
    <span>Shorthand equivalent:</span>
    <br><br>
    <span><code>text-box: ${textBoxTrimValue} ${textBoxEdgeValue}</code></span>
  `;
}

在 JavaScript 的最後一部分，我們執行 setEdgeTrim() 函式一次以設定 UI 的初始狀態。然後，我們將 change 事件偵聽器應用於所有 <select> 元素（透過 addEventListener），以便每當其中一個 <select> 值更改時執行 setEdgeTrim() 以相應地更新 UI：

setEdgeTrim();

boxTrimSelect.addEventListener("change", setEdgeTrim);
trimOverSelect.addEventListener("change", setEdgeTrim);
trimUnderSelect.addEventListener("change", setEdgeTrim);

結果

輸出如下：

text-box-trim 最初設定為 trim-both，這意味著段落的上方和下方邊緣都裁剪。text-box-edge 最初設定為 cap alphabetic，這意味著文字在開始邊緣與大寫字母頂部對齊裁剪，在結束邊緣與基線對齊裁剪。

嘗試更改 <select> 值以檢視它們對顯示文字的影響。

規範

規範
CSS 內聯佈局模組級別 3 # text-box-trim

瀏覽器相容性

另見

text-box、text-box-edge
CSS 內聯佈局模組
developer.chrome.com 上的 CSS text-box-trim (2025)

幫助改進 MDN

瞭解如何貢獻

此頁面最後由 MDN 貢獻者在 2025 年 7 月 14 日修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題