text-box-trim

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Die text-box-trim CSS Eigenschaft bestimmt, welche der oberen und unteren Ränder des Textinhalts aus dem Block-Container eines Textelements geschnitten werden sollen.

Der vertikale Abstand unterscheidet sich zwischen verschiedenen Schriftarten, was die konsistente Typografie im Internet historisch herausfordernd macht. Die Eigenschaft text-box-trim — zusammen mit der Gegenstück-Eigenschaft text-box-edge, die angibt, wie viel Platz abgeschnitten werden soll — erleichtert das Erreichen einer konsistenten vertikalen Abstandsregelung für Text.

Hinweis: Die Abkürzungseigenschaft text-box kann verwendet werden, um die Werte für text-box-trim und text-box-edge in einer einzigen Deklaration anzugeben.

Syntax

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;

Wert

Der Wert der text-box-trim Eigenschaft kann als eines der folgenden Schlüsselwörter angegeben werden:

none: Der Standardwert. Kein Platz wird vom Text abgeschnitten.
trim-both: Sowohl der Anfangs- (über) als auch der Endrand (unter) werden abgeschnitten.
trim-start: Der Anfangsrand (über) wird abgeschnitten.
trim-end: Der Endrand (unter) wird abgeschnitten.

Beschreibung

Die Höhe von reinem Textinhalt bezieht sich auf die Höhe der Schrift. In digitalen Schriftdateien umfasst die Höhe alle Zeichen, einschließlich Großbuchstaben, Aufschwünge, Absenker usw. Verschiedene Schriften haben unterschiedliche Grundlinienhöhen, was bedeutet, dass Textzeilen mit derselben font-size Linienboxen unterschiedlicher Höhen erzeugen, was das Erscheinungsbild des Abstands zwischen den Zeilen beeinflusst.

Die Eigenschaft text-box-trim ermöglicht es Ihnen, den oberen und unteren Rand des Textblock-Containers zu beschneiden, um den Textabstand in Richtung des Blocks einfacher zu kontrollieren.

Der tatsächliche Betrag des abgeschnittenen Platzes wird mithilfe der Eigenschaft text-box-edge festgelegt. Beispielsweise können Sie wählen, den oberen Rand in Übereinstimmung mit den Großbuchstaben oder Kleinbuchstaben einer Schrift zu beschneiden und den unteren Rand bündig mit der Basislinie der Schrift abzuschneiden.

Formale Definition

Anfangswert	`none`
Anwendbar auf	Block containers and inline boxes
Vererbt	Nein
Berechneter Wert	the specified keyword
Animationstyp	diskret

Formale Syntax

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

Beispiele

Grundlegende `text-box-trim` Nutzung

Im folgenden Beispiel setzen wir text-box-edge: cap alphabetic auf zwei Absätzen, was den oberen Rand der Textblock-Container auf die Oberkante der Großbuchstaben und den unteren Rand bündig mit der Textbasislinie zuschneidet.

Dann setzen wir text-box-trim Werte von trim-end auf den ersten und trim-both auf den zweiten. Dies führt dazu, dass beim ersten Absatz nur der untere Rand abgeschnitten wird, während beim zweiten sowohl der obere und der untere Rand abgeschnitten werden.

<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;
}

Ergebnis

Die Ausgabe erfolgt wie folgt. Beachten Sie, dass wir einen oberen und unteren Rand bei jedem Absatz hinzugefügt haben, damit Sie sehen können, wie der Platz in jedem Fall abgeschnitten wurde.

Interaktive `text-box-trim` und `text-box-edge` Wertevergleich

In diesem Beispiel bieten wir eine Benutzeroberfläche, die es Ihnen ermöglicht, die text-box-trim und text-box-edge Werte anzuwenden.

HTML

In unserem HTML enthalten wir drei Hauptkomponenten:

Drei <select> Elemente, die Ihnen erlauben festzulegen, welche Ränder des Absatzes geschnitten werden sollen (der text-box-trim Wert) und wie viel Platz von den Block-Anfangs- und Block-Endrändern des Absatzes geschnitten werden soll (der text-box-edge Wert).
Ein <p> Element, das Text enthält, auf welchen die text-box-* Werte angewendet werden. Dieser Absatz hat contenteditable aktiviert, sodass Sie den Text bearbeiten können.
Ein <output> Element, das die auf den Absatz angewendeten text-box-* Deklarationen anzeigt. Dies wird aktualisiert, wenn eine Auswahl getroffen wird.

Wir importieren auch eine Schriftart von Google Fonts, um sie auf den Text unserer Demo anzuwenden.

Wir haben den genauen HTML-Code der Kürze halber ausgeblendet.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>text-box demo</title>
    <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" />
  </head>
  <body>
    <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>
  </body>
</html>

CSS

In unserem CSS wenden wir die importierte Schriftart auf das <html> Element an und gestalten die Benutzeroberfläche mit flexbox. Wir haben den Großteil des CSS-Codes der Kürze halber ausgeblendet, aber unten zeigen wir die Regeln, die den Absatz stylen, auf den die text-box-* Effekte angewendet werden, und das <output>, das die angewendeten text-box-* Regeln zeigt:

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;
}

Beachten Sie erneut, dass wir einen oberen und unteren Rand auf dem .display Absatz haben, damit Sie sehen können, wie sich der abgeschnittene Raum ändert, wenn verschiedene text-box-* Werte ausgewählt werden.

JavaScript

Im JavaScript beginnen wir, indem wir Referenzen zu den drei <select> Elementen und zwei <p> Elementen erhalten:

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");

Als Nächstes definieren wir eine Funktion namens setEdgeTrim(). Diese wendet einen text-box Wert auf den Absatz basierend auf den Werten der <select> Elemente an und gibt auch die angewendeten Deklarationen aus (sowohl die Langform als auch die Kurzformäquivalente):

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>
  `;
}

Im letzten Teil des JavaScripts führen wir die setEdgeTrim() Funktion einmal aus, um einen anfänglichen Zustand für die Benutzeroberfläche festzulegen. Wir wenden dann change Ereignislistener auf alle <select> Elemente an (via addEventListener), sodass setEdgeTrim() immer ausgeführt wird, wenn einer der <select> Werte geändert wird, um die Benutzeroberfläche entsprechend zu aktualisieren:

setEdgeTrim();

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

Ergebnis

Die Ausgabe erfolgt wie folgt:

text-box-trim ist zunächst auf trim-both gesetzt, was bedeutet, dass die oberen und unteren Ränder des Absatzes abgeschnitten werden. text-box-edge ist zunächst auf cap alphabetic gesetzt, was bedeutet, dass der Text bündig mit den Oberseiten der Großbuchstaben am Startrand und bündig mit der Basislinie am Endrand abgeschnitten wird.

Versuchen Sie, die <select> Werte zu ändern, um zu sehen, welchen Effekt sie auf den Anzeigetext haben.

Spezifikationen

Specification
CSS Inline Layout Module Level 3 # text-box-trim

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

text-box, text-box-edge
CSS Inline-Layout Modul
CSS text-box-trim auf developer.chrome.com (2025)