Den tilgængelige måde
Dit bedste valg er at se Ethans 5-minutters video og derefter henvise til dette:
Cross-browser-måde (ekstra markering)
Indpak det første tegn i afsnittet i et interval, og mål derefter spændet med CSS og stil væk.
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; )CSS3-måde (ingen ekstra markering)
Målret mod det første tegn i første afsnit ved hjælp af pseudoklassevælgere. Ingen ekstra markup nødvendig, men ingen IE <9 support.
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; )den initial-lettermåde
Browsersupport til initial-letterer ret sparsomt på tidspunktet for denne skrivning, men det kan bruges til at beregne antallet af linjer, som det drop capped letter skal indtage, og skriftstørrelsen i stedet for at gøre det alene.
p:first-child:first-letter ( color: #903; font-family: Georgia; initial-letter: 2; )Browsersupport
Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| Ingen | Ingen | Ingen | Ingen | TP * |
Mobil / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| Ingen | Ingen | Ingen | 14,0-14,4 * |