text-overflow:ellipsis doesn't work on IE

Question

In this page there are some links at the left sidebar that get cropped with:

.widget-area .textwidget li {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

In Firefox/Chrome it's displayed properly: Screenshot from Firefox/Chrome

Unfortunately Internet Explorer 8/9/10...: Screenshot from IE 10

The problem isn't IE 10 support for text-overflow:ellipsis.. for example this works on IE 10 too! What's wrong with my implementation? I also tried to add -ms-text-overflow:ellipsis, without any luck.

add display property to block..width as 100%..or the one you wish to hav..or set max width.. — Lucky, Feb 02 '13 at 17:35
Another example of this implementation working on IE 10: http://multiformeingegno.it/ — MultiformeIngegno, Feb 02 '13 at 17:37
Ok i dont hav access to ie css now..i ll update my code later.. — Lucky, Feb 02 '13 at 17:38
it's odd, because IE was the browser that first implemented `ellipsis`, way back in IE5.5, so you'd think they'd get it right. — Spudley, Feb 02 '13 at 17:41
It's a PHP website.. check out the HTML source code at the link provided in the first post. — MultiformeIngegno, Feb 02 '13 at 17:50

score 39 · Accepted Answer · answered Feb 02 '13 at 18:17

39

Removing the word-wrap: break-word property should help.

answered Feb 02 '13 at 18:17

duri

14,991
3
44
49

8

As that wasn't in the CSS above or in my css, this was mildly confusing. Adding "word-wrap: normal" does seem to fix it though. – Kevin Oct 14 '13 at 23:39
This makes no sense to me, but it is the correct answer. Thank you duri. – Mr Griever Oct 23 '13 at 19:30
11

Note: IE11 (and probably below) will not work with this if there are `
` in front of the text! – Sliq Jan 16 '14 at 17:10

score 2 · Answer 2 · answered Feb 02 '13 at 17:15

2

add width property to your CSS code..this would help..

answered Feb 02 '13 at 17:15

asifsid88

4,631
20
30

To what? li? .widget-area .textwidget ul? textwidget div..? – MultiformeIngegno Feb 02 '13 at 17:33
within li place div.. i mean let each li element have div which then contains your content.. and apply width or max width to your inner div (newly added) – asifsid88 Feb 02 '13 at 17:54
Tried now but didn't work. The width gets reduced (I tried with width:190px) but the links are still on 2 lines. – MultiformeIngegno Feb 02 '13 at 18:05
give display: inline-block property to your inner div (div inside li) – asifsid88 Feb 02 '13 at 18:17

score 1 · Answer 3 · edited Dec 20 '17 at 07:19

1

For IE you should add some extra code..like changing ur width property..or try using a dotdotdot jquery plugin..that would be an alternate solution.. Like this

http://dotdotdot.frebsite.nl

Edit: Follow this link

Quirksmode textoverflow

which tells you to set the width:100% for IE..

edited Dec 20 '17 at 07:19

Hash

7,726
9
34
53

answered Feb 02 '13 at 17:09

Lucky

16,787
19
117
151

1

A nice solution is using jQuery for this little thing? Naah. It should be an easy fix, like moving the 3 CSS declarations to the container.. something like that! I Googled but I can't seem to find anything interesting. – MultiformeIngegno Feb 02 '13 at 17:11
Nice solution since its cross browser implementation..and for good presentation..the simplest solution is not always the best one.. – Lucky Feb 02 '13 at 17:18
try run this in ie jsfiddle.net/HerrSerker/kaJ3L/1/ – Lucky Feb 02 '13 at 18:24

text-overflow:ellipsis doesn't work on IE

3 Answers3

Linked