Setting the height to a div to a multiple of line height
Maybe using a "shared" variable provides you with a close enough solution to achieve your desired "inherited line height". Declaring a variable avoids defining the line height twice. Taking up your example this solution sets a fixed height of 2.2em
(1.1 * 2em = 2.2em
= 2 lines):
.progressStatus
{
height: calc(var(--line-height) * 2em);
line-height: var(--line-height);
--line-height: 1.1;
}
Change 2em
to 3em
to use 3 line heights (1.1 * 3em = 3.3em).
Optionally the variable -line-height
can also be defined higher up in the DOM hierarchy if helpful as variables are visible in all nested elements, too, until overridden.
div {
height: 1em; // that's one line, 2em for 2 lines, etc...
line-height: 1em; // the height of one text line
overflow: hidden;
}
There is no way to express that in CSS.
The status text inherits its appearance from the global style sheet and does not know font size, family, line height, or anything.
That's not quite correct. Because text in your status div
inherits its values for font-size
, line-height
, etc. via the cascade, it "knows" these and will style itself accordingly. The problem is that CSS doesn't offer a way of using these values for calculations. They are only implicitly considered when declaring new properties.
The only way to achieve exactly what you want is via JavaScript. I made a fiddle here using some jQuery. In my example, a simple body
declaration acts as the ancestor. Run it with different font-size
and line-height
values in the body CSS.
In practice, I would combine this with your method as a fallback for scenarios where
- JavaScript is disabled
- the relevant ancestor's
line-height
is given as a percentage value (descendants inherit the calculated value) and you decide to change your statusfont-size
. Example: The ancestor'sfont-size
is16px
and itsline-height
is120%
(~ 19px). Now, if you decide your status needs more attention and declare.progressStatus {font-size: 24px;}
, it will inherit the calculatedline-height
(still 19px). So you'd have a line-height smaller than the text size. Explicitly declaring aline-height
as in your "half-solution" prevents that case from occuring.