Der zugängliche Weg
Am besten sehen Sie sich Ethans 5-minütiges Video an und verweisen dann auf Folgendes:
Der browserübergreifende Weg (zusätzliches Markup)
Wickeln Sie einfach das erste Zeichen des Absatzes in einen Bereich ein und richten Sie den Bereich mit CSS und Stil aus.
L orem ipsum dolor sit amet, consectetur adipiscing elit.
.firstcharacter ( color: #903; float: left; font-family: Georgia; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; )Der CSS3-Weg (kein zusätzliches Markup)
Zielen Sie mit Pseudoklassenselektoren auf das erste Zeichen des ersten Absatzes. Kein zusätzliches Markup erforderlich, aber keine IE <9-Unterstützung.
Just a normal sentence.
p:first-child:first-letter ( color: #903; float: left; font-family: Georgia; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; )Der initial-letterWeg
Die Browserunterstützung für initial-letterist zum Zeitpunkt des Schreibens recht spärlich, kann jedoch verwendet werden, um die Anzahl der Zeilen zu berechnen, die der Buchstabe mit der Begrenzung einnehmen soll, und die Schriftgröße, anstatt dies selbst zu tun.
p:first-child:first-letter ( color: #903; font-family: Georgia; initial-letter: 2; )Browser-Unterstützung
Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.
Desktop
| Chrom | Feuerfuchs | IE | Kante | Safari |
|---|---|---|---|---|
| Nein | Nein | Nein | Nein | TP * |
Handy / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| Nein | Nein | Nein | 14.0-14.4 * |