initial-letter
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Die CSS-Eigenschaft initial-letter legt das Styling für hervorstehende, erhabene und versenkte Initialen fest.
Syntax
/* Keyword values */
initial-letter: normal;
/* Numeric values */
initial-letter: 1.5; /* Initial letter occupies 1.5 lines */
initial-letter: 3; /* Initial letter occupies 3 lines */
initial-letter: 3 2; /* Initial letter occupies 3 lines and
sinks 2 lines */
/* Global values */
initial-letter: inherit;
initial-letter: initial;
initial-letter: revert;
initial-letter: revert-layer;
initial-letter: unset;
Der Schlüsselwortwert normal oder eine <number>, optional gefolgt von einem <integer>.
Werte
normal-
Kein spezieller Initialbuchstaben-Effekt. Text verhält sich normal.
<number>-
Definiert die Größe des Initialbuchstabens in Bezug darauf, wie viele Zeilen er einnimmt. Negative Werte sind nicht erlaubt.
<integer>-
Definiert die Anzahl der Zeilen, die der Initialbuchstabe einnehmen soll, wenn seine Größe angegeben ist. Werte müssen größer als null sein. Wird dieser Wert weggelassen, wird er auf den nächsten positiven Ganzzahlwert der Größenangabe abgerundet.
Formale Definition
| Initialer Wert | 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
Initialbuchstabengröße einstellen
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
.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;
}
Ergebnis
Spezifikationen
| Specification |
|---|
| CSS Inline Layout Module Level 3 # sizing-drop-initials |
Browser-Kompatibilität
BCD tables only load in the browser