Stop text from wrapping to 3 or more lines

Question

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.

check this for pur css solution http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/ — Suresh Ponnukalai, Aug 22 '14 at 11:22
@SureshPonnukalai these are great suggestions. I'm wondering why you haven't posted these are answers. — Sachin Kainth, Aug 23 '14 at 17:29
Kanith if you got the right solution then it is fine. Also those are all i got when i checked in google. — Suresh Ponnukalai, Aug 25 '14 at 06:01

Imran Bughio · Accepted Answer · 2014-08-22T11:36:51.543

2

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;
}

edited Aug 22 '14 at 11:36

answered Aug 22 '14 at 11:14

Imran Bughio

4,811
2
30
53

2

This does not put any ellipses anywhere, so it does not do what the question asks for. It may be a good answer to some other question. – Jukka K. Korpela Aug 22 '14 at 13:27

score 1 · Answer 2 · answered Aug 22 '14 at 11:15

1

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.

answered Aug 22 '14 at 11:15

Jatinder Kumar

503
6
17

Stop text from wrapping to 3 or more lines

2 Answers2