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 diese Seiten für Wertbeschreibungen.

Die text-box-Eigenschaft kann auch ein Schlüsselwort normal annehmen, das text-box: none auto; entspricht.

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 umfasst die Höhe alle Zeichen, einschließlich Großbuchstaben, Oberlängen, Unterlängen usw. Unterschiedliche Schriftarten haben unterschiedliche Basislinienhöhen, was bedeutet, dass Textzeilen mit derselben font-size Zeilenboxen mit unterschiedlicher Höhe erzeugen, was das Erscheinungsbild des Abstands zwischen Zeilen beeinflusst.

Die text-box-Eigenschaften ermöglichen das Abschneiden von zusätzlichem Abstand von der Blockstartkante und der Blockendkante des Blockcontainers eines Textelements, was den Durchschuss an der Blockstartkante und der Blockendkante des Texts und dem innerhalb der Schriftart definierten Abstand (wie oben beschrieben) einschließen kann. Dadurch wird es viel einfacher, den Textabstand in der Blockrichtung zu steuern.

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 die obere Kante bis zur Oberkante der Großbuchstaben und die untere Kante bündig mit der Textbasislinie getrimmt werden soll. Da der text-box-trim-Wert auf trim-end gesetzt ist, wird nur die untere Kante des Absatzes getrimmt.

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 die obere Kante bis zur x-Höhe der Schriftart (der oberen Kante der kurzen Kleinbuchstaben) und die untere Kante bündig mit der Textbasislinie getrimmt werden soll. Da der text-box-trim-Wert auf trim-both gesetzt ist, werden sowohl die obere als auch die untere Kante des Absatzes getrimmt.

<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 oben und unten eine Grenze auf jedem Absatz eingefügt haben, damit Sie sehen können, wie der Raum in jedem Fall getrimmt wurde.

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