CSS text-overflow as ellipsis not working as expected

Question

I'm with a simple problem with text-overflow. I can ellipsis my text, but the text won't fill the div entirely.

Here's the demo in jsfiddle: Fiddle

I thought that this piece of code would do the trick but I'm wrong.

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

I've seen various topics related like CSS text ellipsis when using variable width divs, Can't get "text-overflow: ellipsis;" to work, but none of them worked for me.

This is expected behaviour, text-overflow doesnt work on a vertical basis, only on a line of horizontal content - you'll need a JS solution — SW4, May 09 '14 at 13:40

score 0 · Answer 1 · answered May 09 '14 at 13:41

0

Add width to the element for ellipsis to work. It works when content exceed the width of the container. It would not work without specifying the width of the container.

answered May 09 '14 at 13:41

Ankur Mishra

51
1
8

I've added `width: 300px;` to both `div` and `p` and it does not seem to work. – Linesofcode May 09 '14 at 13:44
In your jsfiddle, I added the width to p:first, and got the desired response. Try the same, hope it helps. – Ankur Mishra May 09 '14 at 13:52

score 0 · Answer 2 · edited May 09 '14 at 14:30

0

Try this

Jsfiddle: http://jsfiddle.net/manublueheart/D4FKm/3/

The trick is adding -webkit-box-orient: vertical; to your css

p.first{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 16px;     /* fallback */
    max-height: 32px;      /* fallback */
}

edited May 09 '14 at 14:30

Felipe Miosso

7,309
6
44
55

answered May 09 '14 at 14:12

Manu

806
1
9
25

CSS text-overflow as ellipsis not working as expected

2 Answers2