What's an elegant solution (i.e. without adding a
to the text), to introduce a space between the drop capital and the second letter, when the first word is a single letter?
I'm trying to add drop capitals to the first letter of a paragraph. The problem I am encountering is that it looks confusing if the first word is a 1 letter word, like I, which causes the space after to disappear.
An example is below:
p::first-letter {
font-size: 150%;
float: left;
}
<p>Some text.</p>
<p>
I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text.
</p>
The solution must keep the line height the same between lines in the same way that float: left
does.
The following solution preserves the whitespace after the first character.
p {
white-space: pre-wrap;
}
p::first-letter {
font-size: 150%;
float: left;
}
<p>Some text.</p>
<p>I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text.</p>
NB: this requires the inner html to the p
to be formatted on one line and the whitespace to be correct for the rest of the line, so that it doesn't interfere with the rest of the whitespace.