Dietext-boxCSS Eigenschaft ist eine Kurzform, die den Eigenschaftentext-box-trim undtext-box-edge entspricht, welche zusammen die Menge an Platz angeben, die vom Blockanfang und Blockende eines Blockcontainers eines Textelements abgeschnitten werden soll.

Bestandteil Eigenschaften

Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:

• text-box-trim
• text-box-edge

Syntax

/* Single keyword */text-box: normal;/* One text-box-edge keyword */text-box: trim-start text;text-box: trim-both text;/* Two text-box-edge keywords */text-box: trim-start cap alphabetic;text-box: trim-both ex text;/* Global values */text-box: inherit;text-box: initial;text-box: revert;text-box: revert-layer;text-box: unset;

Werte

Dertext-box Wert kann aus einemtext-box-trim Wert und einemtext-box-edge Wert, getrennt durch ein Leerzeichen, bestehen. Siehe diese Seiten für Wertbeschreibungen.

Dietext-box Eigenschaft kann auch das Schlüsselwortnormal annehmen, was gleichbedeutend ist mittext-box: none auto;

Wenntext-box-trim ausgelassen wird, ist es auftrim-both gesetzt. Wenntext-box-edge ausgelassen wird, ist es aufauto gesetzt.

Formale Definition

Formale Syntax

text-box =
normal|
<'text-box-trim'>||<'text-box-edge'>

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

<text-box-edge> =
auto|
<text-edge>

<text-edge> =
[text|ideographic|ideographic-ink]|
[text|ideographic|ideographic-ink|cap|ex][text|ideographic|ideographic-ink|alphabetic]

Beschreibung

Die Höhe von textbezogenem Inhalt bezieht sich auf die Höhe der Schriftart. In digitalen Schriftart-Dateien enthält die Höhe alle Zeichen, einschließlich Großbuchstaben, Ober- und Unterlängen usw. Verschiedene Schriftarten haben unterschiedliche Basislinienhöhen, was bedeutet, dass Textzeilen mit derselbenfont-size Zeilenboxen unterschiedlicher Höhen erzeugen, die das Erscheinungsbild des Abstands zwischen den Zeilen beeinflussen.

Dietext-box Eigenschaften ermöglichen das Abschneiden von zusätzlichem Platz am Blockanfang und Blockende eines Blockcontainers eines Textelements, was dasführende am Blockanfang und Blockende des Textes und den innerhalb der Schriftart definierten Abstand (wie oben beschrieben) umfassen kann. Dies erleichtert die Steuerung des Textabstands in Blockrichtung erheblich.

Beispiele

Grundlegende Nutzung vontext-box

Im folgenden Beispiel haben wir zwei<p> Elemente mit den Klassenone undtwo.

Wir wenden einentext-box Wert vontrim-end cap alphabetic auf den ersten Absatz an. Dertext-box-edge Wert voncap alphabetic gibt an, dass der obere Rand an den oberen Rand der Großbuchstaben und der untere Rand bündig mit der Textgrundlinie abgeschnitten wird. Da dertext-box-trim Wert auftrim-end gesetzt ist, wird nur der untere Rand des Absatzes abgeschnitten.

Wir wenden einentext-box Wert vontrim-both ex alphabetic auf den zweiten Absatz an. Dertext-box-edge Wert vonex alphabetic gibt an, dass der obere Rand auf die x-Höhe der Schriftart (den oberen Rand der kurzen Kleinbuchstaben) und der untere Rand bündig mit der Textgrundlinie abgeschnitten wird. Da dertext-box-trim Wert auftrim-both gesetzt ist, werden sowohl der obereals auch der untere Rand des Absatzes abgeschnitten.

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

.one {  text-box: trim-end cap alphabetic;}.two {  text-box: trim-both ex alphabetic;}p {  border-top: 5px solid magenta;  border-bottom: 5px solid magenta;}

Ergebnis

Das Ergebnis ist wie folgt. Beachten Sie, dass wir oben und unten an jedem Absatz einen Rand eingefügt haben, damit Sie sehen können, wie der Platz in jedem Fall abgeschnitten wurde.

Spezifikationen

Browser-Kompatibilität

Siehe auch

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