text-box

Diese Eigenschaft ist eine Kurzform 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 die jeweiligen Seiten für die Wertbeschreibung.

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. Unterschiedliche Schriftarten haben unterschiedliche Grundzeilenhöhen, was bedeutet, dass Textzeilen mit derselben font-size Linienboxen unterschiedlicher Höhen erzeugen, was das Erscheinungsbild des Abstands zwischen den Zeilen beeinflusst.

Mit den text-box Eigenschaften kann der zusätzliche Abstand von der Block-Startkante und der Block-Endkante eines Block-Containers eines Text-Elements beschnitten werden, welcher das leading an der Block-Startkante und Block-Endkante des Textes und den innerhalb der Schriftart definierten Abstand (wie oben beschrieben) beinhalten kann. Dies erleichtert die Kontrolle des Textabstands in der 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 Oberseite der Großbuchstaben und der untere Rand bündig mit der Textgrundlinie beschnitten wird. Da der text-box-trim Wert auf trim-end gesetzt ist, wird nur der untere Rand des Absatzes beschnitten.

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 Schrift (die Oberkante der kleinen Buchstaben) und der untere Rand bündig mit der Textgrundlinie beschnitten wird. Da der text-box-trim Wert auf trim-both gesetzt ist, werden sowohl der obere als auch der untere Rand des Absatzes beschnitten.

<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 ist wie folgt. Beachten Sie, wie wir jedem Absatz einen oberen und unteren Rand hinzugefügt haben, so dass Sie sehen können, wie der Raum in jedem Fall beschnitten wurde.

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