Rendering issue of text-overflow: ellipsis in IE9

Question

The text-overflow: ellipsis works as expected in all of the project supported browsers but I still have a rendering issue in IE9 (see screenshot). The CSS rule is followed, but the characters of the ellipsis is not rendered correctly. Most (or all) of the posts treating about text-overflow: ellipsis are generally about it's implementation, but about that very topic, I have no luck.

Answer 1

I actually found more information about that issue here: https://github.com/FortAwesome/Font-Awesome/issues/1079

It is a browser issue. The above link also points to a jsfiddle reproducing the issue and proposing a fix for it (unfortunately for me, it cannot be implemented in the project I am working on).

The HTML of the solution:

<div class="btn btn-primary btn-large"
     style="white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: 300px;">
    <span class="ie9-sucks">&nbsp;</span>
    <i class="icon-download-alt"></i>
    ALongTextBeinEllipsed AndATextAfter
</div>

and the CSS:

.ie9-sucks {
  display: inline-block;
  width: 0;
  height: 0;
}

Answer 2

I had the same problem yestoday. in ie9,text-overflow:ellipsis may be effected by it's first child element,for example:

<div class="text-ellipsis" style="width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
  <span class="icon"></span>
  <span class="text"> here long text</span>
</div>

if you set css iconfont for the first span,I mean font-family, it effects next the later texts.

and in ie8+

    <div class="text-ellipsis" style="width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
      <span class="first-text">first</span>
      <span class="icon"></span>
      <span class="text"> here long text</span>
    </div>

first-text's font-size effects text-ellipsis's ellipsis size.