CODEWITHSUNDEEP
css
Sachin Kainth
Sachin Kainth

Reputation: 46780

Stop text from wrapping to 3 or more lines

Is there some way to stop text from wrapping over more than 2 lines. If the text is short it will appear on 1 line. Longer text then goes onto the second line but I want to stop there and put ellipses at the end and not have the text go onto the 3rd or further lines.

I have seen this post but it deals with stopping the wrapping after the first line.

Upvotes: 2

Views: 3006

Answers (2)

Imran Bughio
Imran Bughio

Reputation: 4941

DEMO

You can limit the maximum height of element and put overflow: hidden; to keep it max 2 lines.

keep your values in em so that this solution works for any font size.

Code:

p{
    font-size: 20px;
    line-height: 1.5em;
    max-height: 3.2em;
    overflow: hidden;
}

Upvotes: 2

Jatinder Kumar
Jatinder Kumar

Reputation: 513

You can specify div height, with overflow hidden css property. It will not show the 3rd line.

If you want to put ellipses, you will need to use javascriot/JQuery solution, to limit the length of the string.

Upvotes: 1

Related Questions