text-box-edge

Der Wert für die Eigenschaft text-box-edge wird als auto oder ein <text-edge>-Wert angegeben:

auto

Der Standardwert. Entspricht dem text-edge-Wert text.

<text-edge>

Ein oder zwei separate Schlüsselwörter, die die oberen und unteren Kantenpositionen darstellen, um den Block-Container des Textelements zu kürzen.

• Wenn zwei Werte angegeben sind, gibt der erste Wert das Kürzungsverhalten an, das auf die Block-Startkante (oben) des Textes angewendet wird, und der zweite Wert gibt das Kürzungsverhalten an, das auf die Block-Endkante (unten) des Textes angewendet wird.
  • Gültige Kürzungswerte für obere Kanten: text, cap und ex.
  • Gültige Kürzungswerte für untere Kanten: text und alphabetic.
• Wenn ein Wert angegeben ist, bestimmt er das Kürzungsverhalten für die oberen und unteren Kanten. Zum Zeitpunkt der Erstellung ist der einzige gültige Einzelwert text.

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. Verschiedene Schriftarten haben unterschiedliche Grundhöhe, was bedeutet, dass Zeilen von Text mit derselben font-size Textboxen von unterschiedlicher Höhe erzeugen, was das Erscheinungsbild von Abständen zwischen den Zeilen beeinflusst.

Die Eigenschaft text-box-edge ermöglicht es Ihnen, Raum von den Start- und/oder Endkanten des Block-Containers des Textes abzuschneiden. Dies kann den Durchschuss an den Block-Start- und Block-Endkanten des Textes sowie den in der Schriftart definierten Abstand (wie oben beschrieben) umfassen. Dies geschieht, indem ein <text-edge>-Wert angegeben wird, der die obere Kante und die untere Kante angibt, an die der Raum abgeschnitten werden soll.

Welche Kante(n) der Raum abgeschnitten werden soll, wird mit der text-box-trim Eigenschaft angegeben. Sie können zum Beispiel wählen, Raum von der oberen Kante oder der unteren Kante des Block-Containers des Textes oder von beiden abzuschneiden.

Diese Eigenschaften erleichtern die Steuerung der Textabstände in Blockrichtung erheblich.

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äufigsten text-box-edge Werte, die Sie für horizontale writing-mode Sprachen wie Englisch oder Arabisch verwenden werden, sind cap alphabetic und ex alphabetic. Der Wert cap schneidet die obere Kante des Block-Containers des Textelements bis zur Oberkante der Großbuchstaben ab, während ex die obere Kante auf die x-Höhe der Schrift (die obere Kante der kurzen Kleinbuchstaben) kürzt. In beiden Fällen schneidet alphabetic die untere Kante bündig mit der Basislinie des Textes ab.

In diesem Beispiel zeigen wir den Effekt beider dieser häufigen Werte auf zwei <p> Elementen. Zusätzlich wurde ein Wert von trim-both für text-box-trim auf beide gesetzt, sodass ihre Start- und Endkanten abgeschnitten werden.

<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;
}

p {
  text-box-trim: trim-both;
  border-top: 5px solid magenta;
  border-bottom: 5px solid magenta;
}

.one {
  text-box-edge: cap alphabetic;
}

.two {
  text-box-edge: ex alphabetic;
}

Resultat

Die Ausgabe ist wie folgt. Beachten Sie, wie wir an jedem Absatz eine obere und eine untere Grenze hinzugefügt haben, damit Sie sehen können, wie der Raum in jedem Fall abgeschnitten wurde.

Für ein vollständiges interaktives text-box-edge Beispiel siehe die text-box-trim Seite.

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