CSS height in terms of line-height

Question

Using CSS, how can I size a box's height in terms of its (or its parent's) line-height?

This would allow easily making regions of text an exact multiple of a number of lines, e.g. to allow showing exactly three lines.

I don't want a javascript solution as those are generally slow and interact poorly with dynamically re-rendered layouts.

Edit: The line-heights in my case are specified in unit-less numbers, as recommended on MDN, so it'd be handy if line-height units weren't required to get this to work.

Answer 1

The Level 4 spec for CSS values now defines a new unit called lh. However, it is still not widely supported at the time of writing.

It's also worth mentioning that a rlh unit is available which behaves the same way as the rem unit.

With this new unit you could do something like this to show only 3 lines of text for example.

.wrapper {
  height: 3lh;
  overflow: hidden;
}