渲染文本溢出问题：IE9中的省略号

Question

文本溢出：省略号在所有项目支持的浏览器中按预期工作，但我在IE9中仍然存在渲染问题（参见屏幕截图）。 遵循CSS规则，但省略号的字符未正确呈现。 大多数（或所有）关于文本溢出的帖子：省略号通常是关于它的实现，但关于这个主题，我没有运气。

Answer 1

我实际上在这里找到了有关该问题的更多信息：https://github.com/FortAwesome/Font-Awesome/issues/1079

这是一个浏览器问题。上面的链接还指向jsfiddle重现问题并提出修复方法（不幸的是，我无法在我正在进行的项目中实施）。

解决方案的HTML：

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

和CSS：

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

Answer 2

我今天遇到了同样的问题。 在ie9中，文本溢出：省略号可能由它的第一个子元素影响，例如：

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

如果你为第一个跨度设置css iconfont，我的意思是font-family，它会影响后面的文本。

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

第一个文本的字体大小效果text-ellipsis的省略号大小。