Přístupná cesta
Nejlepším řešením je sledovat 5minutové video Ethana a poté na něj odkazovat:
Cross-browser way (extra markup)
Stačí zalomit první znak odstavce v rozpětí a poté cílit rozpětí pomocí CSS a stylu pryč.
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; )Způsob CSS3 (žádné další označení)
Zaměřte první znak prvního odstavce pomocí selektorů pseudo tříd. Není třeba žádné další označení, ale žádná podpora IE <9.
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; )initial-lettercesta
Podpora prohlížeče pro initial-letterje v době psaní tohoto článku poměrně řídká, ale lze ji použít k výpočtu počtu řádků, které by písmeno s omezeným písmem mělo zabírat, a velikosti písma, místo toho, abyste to udělali sami.
p:first-child:first-letter ( color: #903; font-family: Georgia; initial-letter: 2; )Podpora prohlížeče
Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.
plocha počítače
| Chrome | Firefox | TJ | Okraj | Safari |
|---|---|---|---|---|
| Ne | Ne | Ne | Ne | TP * |
Mobilní / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| Ne | Ne | Ne | 14,0-14,4 * |