text-box

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

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

Der text-box Wert kann aus einem text-box-trim Wert und einem text-box-edge Wert bestehen, die durch ein Leerzeichen getrennt sind. Siehe diese Seiten für Wertbeschreibungen.

Die text-box Eigenschaft kann auch ein Schlüsselwort normal annehmen, was gleichbedeutend ist mit text-box: none auto;

Wenn text-box-trim weggelassen wird, wird es auf trim-both gesetzt. Wenn text-box-edge weggelassen wird, wird es auf auto gesetzt.

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 ]  

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 Schriftarten haben unterschiedliche Basiszeilenhöhen, was bedeutet, dass Textzeilen mit der gleichen font-size Zeilenboxen unterschiedlicher Höhe erzeugen, was das Erscheinungsbild des Abstands zwischen den Zeilen beeinflusst.

Die text-box Eigenschaften ermöglichen es, zusätzlichen Abstand von der Block-Startkante und der Block-Endkante eines Textelemente-Blockcontainers abzuschneiden, was das Durchschuss an den Block-Start- und Block-Endkanten des Textes sowie den im Font definierten Abstand (wie oben beschrieben) einschließen kann. Dies erleichtert die Kontrolle des Textabstands in Blockrichtung erheblich.

Im folgenden Beispiel haben wir zwei <p> Elemente mit den Klassen one und two.

Wir wenden einen text-box Wert von trim-end cap alphabetic auf den ersten Absatz an. Der text-box-edge Wert von cap alphabetic gibt an, dass der obere Rand bis zur Oberkante der Großbuchstaben und der untere Rand bündig mit der Textbasislinie abgeschrägt wird. Da der text-box-trim Wert auf trim-end gesetzt ist, wird nur der untere Rand des Absatzes abgeschrägt.

Wir wenden einen text-box Wert von trim-both ex alphabetic auf den zweiten Absatz an. Der text-box-edge Wert von ex alphabetic gibt an, dass der obere Rand bis zur x-Höhe der Schriftart (die Oberkante der kurzen Kleinbuchstaben) und der untere Rand bündig mit der Textbasislinie abgeschrägt wird. Da der text-box-trim Wert auf trim-both gesetzt ist, werden sowohl der obere als auch der untere Rand des Absatzes abgeschrägt.

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

.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

Die Ausgabe sieht wie folgt aus. Beachten Sie, wie wir oben und unten an jedem Absatz einen Rand eingefügt haben, damit Sie sehen können, wie der Raum in jedem Fall abgeschnitten wurde.

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