initial-letter

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Die initial-letter CSS Eigenschaft legt die Größe und das Absinken für hängende, erhabene und versenkte Anfangsbuchstaben fest. Diese Eigenschaft gilt für ::first-letter Pseudo-Elemente und für das erste Inline-Kindelement von Block-Containern.

Syntax

css

/* Keyword values */
initial-letter: normal;

/* One value */
initial-letter: 3; /* 3 lines tall, baseline at line 3 */
initial-letter: 1.5; /* 1.5 lines tall, baseline at line 2 */

/* Two values */
initial-letter: 3 2; /* 3 lines tall, baseline at line 2 (raised 1 line) */
initial-letter: 3 1; /* 3 lines tall, baseline unchanged (raised 2 lines) */

/* Global values */
initial-letter: inherit;
initial-letter: initial;
initial-letter: revert;
initial-letter: revert-layer;
initial-letter: unset;

Werte

Der Schlüsselwortwert normal oder eine <number>, optional gefolgt von einem <integer>.

normal: Kein besonderer Initialbuchstabeneffekt. Text verhält sich normal.
<number>: Definiert die Größe des Anfangsbuchstabens, basierend darauf, wie viele Zeilen er einnimmt. Negative Werte sind nicht erlaubt.
<integer>: Bestimmt die Anzahl der Zeilen, die der Anfangsbuchstabe versinken soll, wenn seine Größe angegeben ist. Werte müssen größer als null sein. Wenn weggelassen, verdoppelt er den Größenwert, abgerundet auf die nächstgelegene positive ganze Zahl.

Formale Definition

Anfangswert	`normal`
Anwendbar auf	`::first-letter` Pseudoelemente und Inline-Level-Elemente, die die ersten Kinder eines Blockcontainers sind
Vererbt	Nein
Berechneter Wert	wie angegeben
Animationstyp	by computed value type

Formale Syntax

initial-letter = 
  normal                               |
  <number [1,∞]> <integer [1,∞]>       |
  <number [1,∞]> && [ drop | raise ]?

Beispiele

Anfangsbuchstabengröße festlegen

HTML

html

<p class="normal">Initial letter is normal</p>
<p class="onefive">Initial letter occupies 1.5 lines</p>
<p class="three">Initial letter occupies 3 lines</p>

CSS

css

.normal::first-letter {
  -webkit-initial-letter: normal;
  initial-letter: normal;
}

.onefive::first-letter {
  -webkit-initial-letter: 1.5;
  initial-letter: 1.5;
}

.three::first-letter {
  -webkit-initial-letter: 3;
  initial-letter: 3;
}

p {
  outline: 1px dashed red;
}

Ergebnis

Festlegung des Sinkwerts

In diesem Beispiel haben alle Anfangsbuchstaben die gleiche Größe, jedoch mit unterschiedlichen Sinkwerten.

HTML

html

<p class="four">Initial letter: Sink value = 4</p>
<p class="same">Initial letter: Sink value not declared (same as size)</p>
<p class="two">Initial letter: Sink value = 2</p>
<p class="one">Initial letter: Sink value = 1</p>

CSS

css

.four::first-letter {
  -webkit-initial-letter: 3 4;
  initial-letter: 3 4;
}

.same::first-letter {
  -webkit-initial-letter: 3;
  initial-letter: 3;
}

.two::first-letter {
  -webkit-initial-letter: 3 2;
  initial-letter: 3 2;
}

.one::first-letter {
  -webkit-initial-letter: 3 1;
  initial-letter: 3 1;
}

p {
  outline: 1px dashed red;
}

Ergebnis

Spezifikationen

Specification
CSS Inline Layout Module Level 3 # sizing-drop-initials

Browser-Kompatibilität

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden