Search code examples
csstypography

How to retain a space after floated :first-letter when the first letter is immediately followed by a space?


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.


Solution

  • 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.