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?

score 46 · Accepted Answer · answered Sep 09 '10 at 10:19

46

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

answered Sep 09 '10 at 10:19

irishbuzz

2,420
1
19
16

8

Just in case someone is wondering what is `ex` unit: [What is the value of the css 'ex' unit?](http://stackoverflow.com/questions/918612/what-is-the-value-of-the-css-ex-unit) – Mikel Feb 23 '16 at 09:43
Great Job!! Solved! – Mayer Spitz May 27 '21 at 03:12

score 2 · Answer 2 · answered Sep 07 '17 at 13:02

2

You can use the webkit property line-clamp

.container {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;  
}

It doesn't work on all browsers, but hopefully it will one day.

answered Sep 07 '17 at 13:02

Bit68

1,446
10
25

how can I use this inside a flex div with 2 items? let's say an svg icon + a 2 line clamp div in a row flex div. thanks! – David Casanellas Nov 05 '20 at 16:50

score 2 · Answer 3 · answered Nov 09 '20 at 11:47

2

Use rem:

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

answered Nov 09 '20 at 11:47

Gunar Gessner

2,331
23
23

score 1 · Answer 4 · answered Sep 09 '10 at 10:20

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 :)

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

4 Answers4

Linked