Font-awesome 图标与 Firefox 上的截断文本重叠

Question

我正在尝试在我的页面中创建一个 link，该页面由一个文本后跟一个超赞的字体图标组成。这 link 不能绕过给定的宽度，所以我创建了 I css class 以在必要时截断文本。此外，图标需要右对齐（我使用的是 float:right）。

这是 fiddle 我正在尝试做的例子：

Fiddle

这是代码：

<div class="divclass truncate">
    <a href="www.google.com" title="blablablablabla">
        <i class="fa fa-fw fa-lg fa-lock" style="float:right;" title="Read only"></i>
        blablablablablablablablabla
    </a>
</div>

.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.divclass {
    width: 100px;
}

这在 Chrome 上运行良好，但在 Firefox 上图标与文本重叠。

有人知道如何解决这个问题吗？

Answer 1

我可能会以稍微不同的方式处理这个问题：

• 将width和text-overflow应用于link本身
• 绝对定位图标
• 给 link 一些额外的右边填充，使 space 成为图标

http://jsfiddle.net/czf552vp/7/