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 Wert von text-box-trim und einem Wert von text-box-edge bestehen, getrennt durch ein Leerzeichen. Siehe die entsprechenden Seiten für die Wertbeschreibungen.

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

Wenn text-box-trim weggelassen wird, ist es auf trim-both gesetzt. Wenn text-box-edge weggelassen wird, ist 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 nur Text-Inhalt ist relativ zur Höhe der Schrift. In digitalen Schriftdateien umfasst die Höhe alle Zeichen, einschließlich Großbuchstaben, Oberlängen, Unterlängen usw. Verschiedene Schriften haben unterschiedliche Basis-Linienhöhen, was bedeutet, dass Zeilen mit derselben 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 am Anfang und am Ende des Blockcontainers eines Textelements zu entfernen. Dies kann das Durchschuss am Anfang und Ende des Blocks sowie den in der Schrift definierten Abstand umfassen (wie oben beschrieben). Dies macht es viel einfacher, den Textabstand in Blockrichtung zu kontrollieren.

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 auf der Höhe der Großbuchstaben geschnitten und die untere Kante mit der Textbasislinie bündig ist. Da der text-box-trim-Wert auf trim-end gesetzt ist, wird nur die untere Kante des Absatzes geschnitten.

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

<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, dass wir einen oberen und unteren Rand auf jedem Absatz hinzugefügt haben, sodass Sie sehen können, wie der Abstand in jedem Fall angepasst wurde.

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