Доступний шлях
Найкраще подивитися 5-хвилинне відео Ітана, а потім посилатися на це:
Крос-браузерний спосіб (додаткова розмітка)
Просто оберніть перший символ абзацу в інтервал, а потім націліть інтервал за допомогою CSS і стилю.
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 (без зайвої розмітки)
Виділіть перший символ першого абзацу за допомогою селекторів псевдокласу. Не потрібна додаткова розмітка, але не підтримується 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-letterшлях
На initial-letterмомент написання цієї статті підтримка браузера досить рідкісна, але її можна використовувати для обчислення кількості рядків, яку має займати обмежена буква, та розміру шрифту, замість того, щоб робити це самостійно.
p:first-child:first-letter ( color: #903; font-family: Georgia; initial-letter: 2; )Підтримка браузера
Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.
Робочий стіл
| Chrome | Firefox | IE | Край | Сафарі |
|---|---|---|---|---|
| Ні | Ні | Ні | Ні | TP * |
Мобільний / планшетний
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| Ні | Ні | Ні | 14,0-14,4 * |