SiteKickr Web Development

CSS line-height – word wrap vs. line break

I've noticed something about the CSS line-height property that surprises me a little bit. If you supply a line-height of say, 1.5 em, to a given element, it will apply that line-height to any automatic word-wrapping that occurs.

So, if you have a paragraph, such as:

<p style="width: 100px; line-height: 1.5em;">
  This is a very narrow paragraph used to demonstrate<br />the line-height property.
</p>

You'll notice that both the "hard" line-break and the automatic word-wrap have the 1.5em line-height applied. This may or may not be desired, depending on your needs.

To avoid this, I've found that applying the line-height specifically to the <br /> elements does the trick.

p { line-height: 1em; }
p br { line-height: 1.5em; }

 

There may be a better solution to this. If you are in the know, please comment!