text-box-edge

Der Wert der text-box-edge-Eigenschaft 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 Randpositionen zum Trim des Blockcontainers des Textelements repräsentieren.

• Wenn zwei Werte angegeben werden, gibt der erste Wert das Trimmverhalten an, das auf den Block-Start (oben) Rand des Textes angewendet wird, und der zweite Wert gibt das Trimmverhalten an, das auf den Block-Ende (unten) Rand des Textes angewendet wird.
  • Gültige obere Rand-Trimmwerte: text, cap und ex.
  • Gültige untere Rand-Trimmwerte: text und alphabetic.
• Wenn ein Wert angegeben wird, spezifiziert er das obere und untere Rand-Trimmverhalten. Zum Zeitpunkt des Schreibens 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 Grundlinienhöhen, was bedeutet, dass Textzeilen mit derselben font-size unterschiedliche Zeilenhöhen erzeugen und somit das Erscheinungsbild des Abstands zwischen Zeilen beeinflussen.

Die text-box-edge-Eigenschaft ermöglicht es Ihnen, Platz vom Start- und/oder Endrand des Textblockcontainers abzuschneiden. Dies kann das Lead am Block-Start-Rand und Block-Ende-Rändern des Textes sowie den im Font definierten Abstand (wie oben beschrieben) umfassen. Dies geschieht durch Angabe eines <text-edge>-Wertes, der den oberen und unteren Rand angibt, um den abzuschneidenden Raum zu bestimmen.

Welche Rand/Ränder abgeschnitten werden sollen, wird mit der text-box-trim-Eigenschaft angegeben. Zum Beispiel können Sie wählen, Platz vom oberen Rand oder vom unteren Rand des Textblockcontainers oder von beiden abzuschneiden.

Diese Eigenschaften machen es viel einfacher, den Textabstand in Blockrichtung zu steuern.

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, sind cap alphabetic und ex alphabetic. Der cap-Wert trimmt den oberen Rand des Textelements zu den oberen Rändern der Großbuchstaben, während ex den oberen Rand auf die x-Höhe der Schrift (die obere Kante der kurzen Kleinbuchstaben) zuschneidet. In jedem Fall schneidet alphabetic den unteren Rand bündig mit der Textbasislinie ab.

In diesem Beispiel zeigen wir die Wirkung dieser beiden allgemeinen Werte auf zwei <p>-Elemente. Zusätzlich wurde bei beiden ein text-box-trim-Wert von trim-both gesetzt, sodass ihre Start- und Endränder getrimmt 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;
}

Ergebnis

Das Ergebnis sieht wie folgt aus. Beachten Sie, dass wir oben und unten einen Rahmen um jeden Absatz eingefügt haben, damit Sie sehen können, wie der Platz 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)