Text-overflow: ellipsis in IE

Question

When I using text-overflow: ellipsis; in IE I have problem with two long words:

In Chrome it looks like:

firstlongword1...

secondlongword2...

In IE:

firstlongword1...

secondlongword2 //word cropped, but dots not present

HTML and CSS:

.orange {
    color: #f58026;
    text-overflow: ellipsis;
    display: block;
    overflow: hidden;
}

<span class="orange" title="12 12">first_verylongworddddddddddddddddddddddddddddddddddddddddddd second_verylonglonglonglonglonglonglonglonglonglong</span>

If somebody had a problems with it, please help. Or please say me if exist other method to fix it.

Answer 1

Checking the CSS specification it would appear that Chrome (and Firefox) are displaying the ellipsis correctly, IE, it seems is behind the curve. Goto http://www.w3.org/TR/css3-ui/#text-overflow0 and scroll down to Example 9 to see demonstrations on how text-overflow:ellipsis; should be rendered.

As such it would seem that the only way to get a similar result in IE is to wrap the words in their own elements:

.orange {
    color: #f58026;
    display: block;
    text-overflow: ellipsis;
}
.orange span {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

<span class="orange" title="12 12">
    <span>first_verylongworddddddddddddddddddddddddddddddddddddddddddd</span> 
    <span>second_verylonglonglonglonglonglonglonglonglonglong</span>
</span>

JS Fiddle: http://jsfiddle.net/fL6za37f/2/