CSS height in terms of line-height -

using css, how can size box's height in terms of (or parent's) line-height?

this allow making regions of text exact multiple of number of lines, e.g. allow showing 3 lines.

i don't want javascript solution slow , interact poorly dynamically re-rendered layouts.

edit: line-heights in case specified in unit-less numbers, recommended on mdn, it'd handy if line-height units weren't required work.

i'm not sure i've entirely understood question, couldn't use relative units - ems?

if line height is, example, 2ems (or unitless) , want total height of box 3 "lines" high (presumably not taking account padding) set height 6ems. way, line height flexible based on base unit (font size) , height fluid using same base unit.

here's example:

.mybox {      line-height: 2; // twice value of font-size      height: 6ems; // equivalent 3 lines high 

to achieve same thing in sass write:

$lineheight: 2; // value can unitless or unit ems, px or percentage $numberoflines: 3;  .mybox {     line-height: $lineheight;     height: $lineheight * $numberoflines; } 

this have flexibility move variables settings file (or else) can alter values without having find selectors use variables.