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:

Unfortunately Internet Explorer 8/9/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.

Solution 1

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

Solution 2

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

Solution 3

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..