How to set element height for a fixed number of lines of text

Question

Given some text that occupies about 10 rows, how can I resize its container to only show the first 3 rows and hide the others? Apparently this works, but I think it is not reliable:

.container {
    height: 7.5ex; /* 2.5ex for each visible line */
    overflow: hidden;
}

Can I rely on the fact that height of one row = 2.5ex or is that just a coincidence in the browsers I am using to test?

Answer 1

If you are going to use this you should ensure the line-height is always 2.5ex

.container {
  line-height: 2.5ex;
  height: 7.5ex; /* 2.5ex for each visible line */
  overflow: hidden;
}

Demo

Answer 2

The ex unit is the font x-height (height of its x character). I would not use this here. You should use the em unit. This is the actual font-height. The font-height is defined by setting the line-height property. So:

.container {
    height: 3em; /* 1em for each visible line */
    overflow: hidden;
}

Here is some more info on CSS length units: http://www.w3.org/TR/CSS21/syndata.html#length-units

Answer 3

Hi, you can set the line height of a text and with it knows the exact height of each row and set desired height of your container, simply doing this:

.container {
    line-height:25px;
    height:75px;
    overflow:hidden;
}

Now everything works rightly :)