Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Setting the height to a div to a multiple of line height

Tags:

css

How do you express the height of a div as a multiple of its line height in pure CSS without hard-coding line height or font size?

Background

I have a box (a DIV) that contains status text. The text will sometimes span multiple lines and often need only one. The status is updated several (five) times per second and this causes the bottom border and everything below the box to "jump" up and down as the box changes size to fits its contents.

One solution to the jumping would be to set the min-height of the DIV to the height of two lines. Status text with more than two lines is rare so that degree of jumping would be acceptable.

Alternatively I could set the height to the exact height of two lines and use overflow:hide to truncate the text. That would eliminate all jumping at the expense of some information.

Which raises the question: How do I express height as a multiple of line height? The status text inherits its appearance from the global style sheet and does not know font size, family, line height, or anything.

Half-solution

I can use the em unit to express height without knowing anything about the font but that still leaves the line height property which also affects the final line height.

Ideally I would prefer to inherit line height but if I override it to a known multiplier then I can force the box to become exactly two lines tall.

.progressStatus {     line-height: 1.1;     height: 2.2em; } 

This solution is good enough for my needs but I'm curious if there's a better solution that does not involve javascript.

like image 436
Journey Avatar asked May 31 '13 19:05

Journey


People also ask

How do you tame line height in CSS?

Getting CSS to treat line-height like leading Michael Taranto released a tool called Basekick that solves this very issue. It does so by applying a negative top margin to the ::before pseudo-elementand a translateY to the element itself. The end result is a line of text without any extra space around it.

Can I use REM for line height?

The “rem” unit of measurement we used with the line-height property sets a line height relative to the font-size of the root element. “rem” stands for “root element.” So, because our font size was 16px, our line height for this paragraph of text was 25.6px (16px * 1.6).


1 Answers

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

  1. JavaScript is disabled
  2. the relevant ancestor's line-height is given as a percentage value (descendants inherit the calculated value) and you decide to change your status font-size. Example: The ancestor's font-size is 16px and its line-height is 120% (~ 19px). Now, if you decide your status needs more attention and declare .progressStatus {font-size: 24px;}, it will inherit the calculated line-height (still 19px). So you'd have a line-height smaller than the text size. Explicitly declaring a line-height as in your "half-solution" prevents that case from occuring.
like image 147
kkoala Avatar answered Oct 02 '22 20:10

kkoala