How to make dropcap that works with short paragraphs

Asked Jul 24 '20 at 15:00

Active Jul 24 '20 at 15:02

Viewed 14 times

I have found lots of guides and examples on how to make dropcaps with CSS, but they all fail when used with very short paragraphs. The concept is simple:

<style>
p::first-letter {
  float: left;
  font-size: 48pt;
}
</style>
<p>
  Lorem ipsum dolor sit amet,
</p>
<p>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>

https://codepen.io/MadsSkjern/pen/vYLPaVo

Works well most of the time

But not with short paragraphs

How can I make a solution that also works with short paragraphs?

asked Jul 24 '20 at 15:00

Mads Skjern

5,648
6
36
40

overflow:auto to p – Temani Afif Jul 24 '20 at 15:03
This should do the trick: p { clear: left; } p::first-letter { float: left; font-size: 48pt; } https://codepen.io/standardspace/pen/JjGzadV – StandardSpace Jul 24 '20 at 15:03

How to make dropcap that works with short paragraphs

Works well most of the time

But not with short paragraphs

0 Answers0