Dietext-box-trimCSS Eigenschaft gibt an, welche der oberen und unteren Kanten des Textinhalts von einem Text-Elemente-Blockcontainer abgeschnitten werden sollen.

Der vertikale Abstand unterscheidet sich zwischen Schriften, was die konsistente Typografie im Web historisch herausfordernd gemacht hat. Dietext-box-trim-Eigenschaft — zusammen mit ihrer Gegenpartetext-box-edge, die angibt, wie viel Platz abgeschnitten werden soll — erleichtert es, konsistente vertikale Abstände von Text zu erreichen.

Syntax

/* 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 dertext-box-trim-Eigenschaft kann mit einem der folgenden Schlüsselwörter spezifiziert werden:

none

Der Standardwert. Kein Platz wird vom Text abgeschnitten.

trim-both

Die Start- (oben) und End- (unten) Kanten werden beide abgeschnitten.

trim-start

Die Start- (oben) Kante wird abgeschnitten.

trim-end

Die End- (unten) Kante wird abgeschnitten.

Beschreibung

Die Höhe von reinem Textinhalt ist relativ zur Höhe der Schriftart. In digitalen Schriftdateien enthält die Höhe alle Zeichen, einschließlich Großbuchstaben, Oberlängen, Unterlängen usw. Verschiedene Schriften haben unterschiedliche Basis-Zeilenhöhen, was bedeutet, dass Textzeilen mit derselbenfont-size Linienboxen unterschiedlicher Höhen erzeugen, was das Erscheinungsbild der Abstände zwischen den Zeilen beeinflusst.

Dietext-box-trim-Eigenschaft ermöglicht Ihnen, die oberen und unteren Kanten des Textblockcontainers abzuschneiden und so die Steuerung der Textabstände in Blockrichtung zu erleichtern.

Die tatsächliche Menge des abgeschnittenen Raums wird durch dietext-box-edge-Eigenschaft spezifiziert. Beispielsweise können Sie wählen, die obere Kante im Einklang mit den Großbuchstaben oder Kleinbuchstaben einer Schrift abzukappen und die untere Kante bündig mit der Basislinie der Schrift.

Formale Definition

Formale Syntax

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

Beispiele

Grundlegende Verwendung vontext-box-trim

Im folgenden Beispiel setzen wirtext-box-edge: cap alphabetic auf zwei Absätzen, was die obere Kante des Blockcontainers der Textelemente auf die Höhe der Großbuchstaben und die untere Kante bündig mit der Textbasislinie abschneidet.

Wir setzen danntext-box-trim Werte vontrim-end auf den ersten undtrim-both auf den zweiten Absatz. Dies führt dazu, dass der erste Absatz nur seine untere Kante abgeschnitten hat, während der zweite sowohl die obereals auch die untere Kante abgeschnitten hat.

<p>This is .one</p><p>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;}

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 ist wie folgt. Beachten Sie, wie wir bei jedem Absatz oben und unten eine Grenze hinzugefügt haben, damit Sie sehen können, wie der Raum in jedem Fall abgeschnitten wurde.

Interaktiver Vergleich dertext-box-trim- undtext-box-edge-Werte

In diesem Beispiel bieten wir eine Benutzeroberfläche, die es Ihnen ermöglicht, die auf einen Absatz von Text angewendetentext-box-trim- undtext-box-edge-Werte auszuwählen.

HTML

In unserem HTML haben wir drei Hauptelemente:

• Drei<select> Elemente, die es Ihnen ermöglichen festzulegen, welche Kanten des Absatzes abgeschnitten werden sollen (dertext-box-trim Wert) und wie viel Platz von den Anfangs- und Endkanten des Blocks des Absatzes abgeschnitten werden soll (dertext-box-edge Wert).
• Ein<p> Element, das den Text enthält, auf den dietext-box-* Werte angewendet werden. Dieser Absatz hatcontenteditable gesetzt, so dass Sie den Text bearbeiten können.
• Ein<output> Element, das die auf den Absatz angewendetentext-box-* Deklarationen anzeigt. Dies wird aktualisiert, wenn eine Auswahl getroffen wird.

Wir importieren auch eine Schrift aus dem Google Fonts Service, um sie auf den Text in unserem Demo zu anwenden.

Wir haben den genauen HTML-Code zur Kürze verborgen.

<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>      <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>      <option>text</option>      <option selected>cap</option>      <option>ex</option>    </select>  </div></section><p contenteditable>Holly Golightly</p><section>  <div>    <label for="trim-under">Select trim under (end) value:</label>    <select>      <option>text</option>      <option selected>alphabetic</option>    </select>  </div></section><output></output>

CSS

In unserem CSS wenden wir die importierte Schrift auf das<html> Element an und gestalten die Benutzeroberfläche mitflexbox. Wir haben den Großteil des CSS-Codes zur Kürze verborgen, aber unten zeigen wir die Regeln, die den Absatz stylen, auf den dietext-box-* Effekte angewendet werden, und das<output>, das die angewendetentext-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;}

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 wieder, wie wir eine obere und untere Grenze auf den.display Absatz eingefügt haben, damit Sie sehen können, wie der Raum, der abgeschnitten wird, sich ändert, wenn verschiedenetext-box-* Werte ausgewählt werden.

JavaScript

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

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 namenssetEdgeTrim(). Diese wendet einentext-box Wert auf den Absatz basierend auf den Werten der<select> Elemente an und druckt auch die angewandten Deklarationen an die Ausgabe (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 diesetEdgeTrim() Funktion einmal aus, um einen Anfangszustand für die Benutzeroberfläche festzulegen. Wir fügen dannchange Ereignis-Listener zu allen<select> Elementen hinzu (überaddEventListener), sodasssetEdgeTrim() ausgeführt wird, wann immer sich eines der<select> Werte ändert, um die Benutzeroberfläche entsprechend zu aktualisieren:

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

Ergebnis

Die Ausgabe ist wie folgt:

text-box-trim ist anfangs auftrim-both gesetzt, was bedeutet, dass die oberenund unteren Kanten des Absatzes abgeschnitten werden.text-box-edge ist anfangs aufcap alphabetic gesetzt, was bedeutet, dass der Text bündig mit der Oberkante der Großbuchstaben an der Startkante und bündig mit der Basislinie an der Endkante abgeschnitten wird.

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

• text-box,text-box-edge
• CSS inline layout Modul
• CSS text-box-trim auf developer.chrome.com (2025)