文本溢出的渲染问题:IE9中的省略号 [英] Rendering issue of text-overflow: ellipsis in IE9

问题描述

文本溢出:省略号在所有受项目支持的浏览器中都能正常运行，但是IE9中仍然存在渲染问题(请参见屏幕截图). 遵循CSS规则，但是省略号的字符未正确呈现. 大多数(或全部)有关文本溢出的文章:省略号通常是关于其实现的，但是关于那个主题，我没有运气.

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.

推荐答案

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

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

这是浏览器问题.上面的链接还指向 jsfiddle 重现问题并提出解决方案(不幸的是，我，它无法在我正在从事的项目中实施.

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

解决方案的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;
}

这篇关于文本溢出的渲染问题:IE9中的省略号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！