Css Обход заглавной буквы

Question

Я пытаюсь реализовать начальную букву CSS как больший размер с текстом, падающим вокруг него, как в этом примере CSS Трюки . например,

.subhead {
    initial-letter: 4;
}

Но он поддерживается только Safari, другие браузеры не реализуют его. Но на странице CSS -Tricks есть это -

.drop-cap::first-letter {
  -webkit-initial-letter: 4;
  initial-letter: 4;
  color: orange;
  font-weight: bold;
  margin-right: .75em;
}

Этот пример явно не работает при просмотре в Chrome, так почему же -webkit-initial-letter?

Это возможность, которую я действительно хотел бы реализовать на определенной странице c, есть ли способ, который я могу реализовать, который работает во всех браузерах? Я специально хочу, чтобы первая буква была пропущена, а последующие строки обернуты вокруг нее, а не просто первая буква с увеличенным шрифтом вверх.

Спасибо.

Answer 1

Используя float, вы можете достичь этого:

p {
 line-height:1.2;
}
p::first-letter {
 float:left;
 font-size:400%;
}

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in bibendum libero. Fusce feugiat facilisis mi, dapibus porta enim ornare in. Morbi dapibus interdum suscipit. Aenean fermentum dui lectus, eget pharetra nisi bibendum at. Quisque hendrerit dolor ut eros suscipit facilisis. Aenean blandit mi orci, at tristique turpis ullamcorper eu. Quisque interdum faucibus vulputate. Suspendisse consequat volutpatfermentum dui lectus, eget pharetra nisi bibendum at. Quisque hendrerit dolor ut eros suscipit facilisis. Aenean blandit mi orci, at tristique turpis ullamcorper eu. Quisque interdum faucibus vulputate. Suspendisse consequat volutpatfermentum dui lectus, eget pharetra nisi bibendum at. Quisque hendrerit dolor ut eros suscipit facilisis. Aenean blandit mi orci, at tristique turpis ullamcorper eu. Quisque interdum faucibus vulputate. Suspendisse consequat volutpat tristique.
</p>

Если вы не хотите настраивать размер шрифта, вы можете управлять с помощью поля:

p {
 line-height:1.2em;
}
p::first-letter {
 float:left;
 line-height:0;
 margin:calc(2*1.1em) 10px;
}

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in bibendum libero. Fusce feugiat facilisis mi, dapibus porta enim ornare in. Morbi dapibus interdum suscipit. Aenean fermentum dui lectus, eget pharetra nisi bibendum at. Quisque hendrerit dolor ut eros suscipit facilisis. Aenean blandit mi orci, at tristique turpis ullamcorper eu. Quisque interdum faucibus vulputate. Suspendisse consequat volutpatfermentum dui lectus, eget pharetra nisi bibendum at. Quisque hendrerit dolor ut eros suscipit facilisis. Aenean blandit mi orci, at tristique turpis ullamcorper eu. Quisque interdum faucibus vulputate. Suspendisse consequat volutpatfermentum dui lectus, eget pharetra nisi bibendum at. Quisque hendrerit dolor ut eros suscipit facilisis. Aenean blandit mi orci, at tristique turpis ullamcorper eu. Quisque interdum faucibus vulputate. Suspendisse consequat volutpat tristique.
</p>