CSS-Eigenschaft text-box

Zugehörige Eigenschaften

Diese Eigenschaft ist eine Kurzschreibweise 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 Wert von text-box kann aus einem Wert für text-box-trim und einem Wert für text-box-edge bestehen, die durch ein Leerzeichen getrennt sind. Beschreibungen der Werte finden Sie auf den jeweiligen Seiten.

Die Eigenschaft text-box kann auch den Schlüsselwortwert normal annehmen. Dieser entspricht 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.

Beschreibung

Die Höhe von reinem Textinhalt hängt von der Höhe der Schriftart ab. In digitalen Schriftdateien berücksichtigt die Höhe alle Zeichen, einschließlich Großbuchstaben sowie Zeichen mit Ober- und Unterlängen. Verschiedene Schriftarten haben unterschiedliche grundlegende Zeilenhöhen. Daher erzeugen Textzeilen mit derselben font-size unterschiedlich hohe Zeilenboxen, was sich auf die Abstände zwischen den Zeilen auswirkt.

Mit den text-box-Eigenschaften lässt sich zusätzlicher Platz am Blockanfang und Blockende des Block-Containers eines Textelements entfernen. Dazu können der Zeilendurchschuss an diesen Kanten und die innerhalb der Schriftart definierten Abstände gehören (wie oben beschrieben). Dadurch lassen sich Textabstände in Blockrichtung wesentlich einfacher steuern.

Formale Definition

Formale 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 ]  

Beispiele

Grundlegende Verwendung von text-box

Im folgenden Beispiel gibt es zwei <p>-Elemente mit den Klassen one und two.

Auf den ersten Absatz wenden wir den text-box-Wert trim-end cap alphabetic an. Der Wert cap alphabetic für text-box-edge legt fest, dass die obere Kante bis zur Oberkante der Großbuchstaben und die untere Kante bündig mit der Textgrundlinie zugeschnitten wird. Da der Wert für text-box-trim auf trim-end gesetzt ist, wird nur die untere Kante des Absatzes zugeschnitten.

Auf den zweiten Absatz wenden wir den text-box-Wert trim-both ex alphabetic an. Der Wert ex alphabetic für text-box-edge legt fest, dass die obere Kante bis zur x-Höhe der Schriftart (der Oberkante kleiner Kleinbuchstaben) und die untere Kante bündig mit der Textgrundlinie zugeschnitten wird. Da der Wert für text-box-trim auf trim-both gesetzt ist, werden sowohl die obere als auch die untere Kante des Absatzes zugeschnitten.

<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, dass jeder Absatz einen oberen und einen unteren Rahmen hat. So können Sie erkennen, wie der Platz jeweils zugeschnitten wurde.

Spezifikationen

Browser-Kompatibilität

Siehe auch

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