How to trigger text-overflow: ellipsis on multi-line element

Question

I have this element that contains a string which exceeds the space available. Text should be displayed on two lines only. I need text-overflow: ellipsis to be triggered but it's not happening here. What am I doing wrong?

<div><span>IpsumLorem Traborditum orb Porfalohyrm</span></div>

div{
    text-overflow: ellipsis;
    overflow: hidden;
    float: left;
    line-height: 20px;
    padding: 8px 6px 6px;
    height: 44px;
    width: 133px;
}

JSFiddle

score -2 · Answer 1 · answered Jan 30 '13 at 04:48

-2

You need white-space: nowrap; for text-overflow: ellipsis; to work properly: http://jsfiddle.net/DHge3/3/

answered Jan 30 '13 at 04:48

Lowkase

5,631
2
30
48

1

OP try to display text in Two lines, not in a single line as your Fiddle show it in a single line. – Usman Jan 30 '13 at 04:51

score -2 · Answer 2 · answered Jan 30 '13 at 05:19

-2

Remove padding from your CSS and it will work fine

CSS

div {
    line-height: 20px;
    height: 44px;
    width: 133px;
    overflow: hidden;
    text-overflow: ellipsis;
}

FIDDLE

answered Jan 30 '13 at 05:19

Usman

3,200
3
28
47

No ellipsis displayed. – Jukka K. Korpela May 16 '13 at 05:11
i don't think that the requirement is for Ellipse?? – Usman May 16 '13 at 06:35

How to trigger text-overflow: ellipsis on multi-line element

2 Answers2

Linked