CODEWITHSUNDEEP
htmlcss
Flood Gravemind
Flood Gravemind

Reputation: 3803

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

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

Upvotes: 39

Views: 38172

Answers (2)

ScottS
ScottS

Reputation: 72261

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.

Upvotes: 8

Daniel Gimenez
Daniel Gimenez

Reputation: 20494

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.

Upvotes: 64

Related Questions