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

Tom_26155 0
Viewed 29488

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?

css
4 Answers

Use rem:

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