html - Css initial-letter workaround

Question

I'm trying to implement a CSS initial-letter as a larger size with the text droppping around it, as in this example CSS Tricks. e.g.

.subhead {
    initial-letter: 4;
}

But its only supported by Safari, the other browsers dont implement it. But the CSS-Tricks page has this -

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

This example clearly doesnt work when viewed in Chrome, so why the -webkit-initial-letter ?

Its a feature I'd really like to implement on a specific page, is there a workaound I can implement that works on all browsers ? I specifically want the first letter to drop, and subsequent lines to wrap around it, not just first-letter with a bigger font going upwards.

Thanks.

Answer 1

Using float you can achieve this:

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>