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 上查看此页面 • 报告此内容的问题