text-overflow:ellipsis doesn't work on IE

internet-explorer overflow css
MultiformeIngegno picture MultiformeIngegno · Feb 2, 2013 · Viewed 46.3k times · Source

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.

Answer

duri picture duri · Feb 2, 2013

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

Related questions

CSS: IE: white-space: nowrap not working

IE not properly responding to nowrap CSS attribute. Question: How do I make this work in IE so that it renders as Chrome's rendering result. http://jsfiddle.net/subsari/tmz0t0z2/3/ <body> <table> <tr&…

Read More
Hide scroll bar, but while still being able to scroll

I want to be able to scroll through the whole page, but without the scrollbar being shown. In Google Chrome it's: ::-webkit-scrollbar { display: none; } But Mozilla Firefox and Internet Explorer don't seem to work like that. I also tried this …

Read More
What does <meta http-equiv="X-UA-Compatible" content="IE=edge"> do?

What's the difference if one web page starts with <!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> and If page starts with <!DOCTYPE html> <html> <…

Read More