Limiting a div height to two lines of text inside it?

Question

As the question says how to limit a div's height to one/two/n lines of the text inside it?

Answer 1

div {     height: 1em; // that's one line, 2em for 2 lines, etc...     line-height: 1em; // the height of one text line     overflow: hidden; } 

This will display a div with a height the size of the current font size, and any overflow is clipped. As long as line-height and height are equal there will be one line of text. The proportion of height/line-height determines the number of lines displayed.

Answer 2

The em unit adjusts by font-size, and line-height proportions are also based on that. So those are what you want to be using for "fixing" height.

You want either this:

div {     height: 2.2em;     line-height: 1.1;     overflow: auto; } 

Example Fiddle.

Or if you want it to potentially reduce to 1 line, then use this:

div {     max-height: 1.1em;     line-height: 1.1;     overflow: auto; } 

Example Fiddle.