text-box CSS-Eigenschaft

Bestandteileigenschaften

Diese Eigenschaft ist eine Kurznotation 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

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 mit text-box: none auto; ist.

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

Formale Definition

Formaler 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 ausschließlich Textinhalt ist relativ zur Höhe der Schriftart. In digitalen Schriftdateien 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 derselben font-size Zeilenboxen unterschiedlicher Höhe erzeugen, was das Erscheinungsbild des Abstands zwischen den Zeilen beeinflusst.

Die text-box-Eigenschaften ermöglichen das Abschneiden von zusätzlichem Raum von der Block-Anfangskante und der Block-Endkante eines Textelement-Blockcontainers, was die Durchschuss an den Block-Anfangs- und Block-Endkanten des Textes einschließen kann, sowie den in der Schriftart definierten Abstand (wie oben beschrieben). Dies macht es viel einfacher, den Textabstand in der Blockrichtung zu steuern.

Beispiele

Grundlegender text-box-Einsatz

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 Oberseite der Großbuchstaben und die untere Kante bündig mit der Textbasislinie getrimmt wird. 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 Schrift (die Oberkante der kurzen Kleinbuchstaben) und die untere Kante bündig mit der Textbasislinie getrimmt wird. 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, dass wir oben und unten einen Rahmen bei jedem Absatz eingefügt haben, damit Sie sehen können, wie der Raum in jedem Fall beschnitten 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)