字体很棒的图标在Firefox上重叠截断的文本

Question

我试图在我的页面中创建一个链接，该链接由文本后跟一个字体很棒的图标组成。此链接无法绕过给定的宽度，因此我创建了I css类以在必要时截断文本。此外，图标需要与右侧对齐（我使用float:right）。

这是我尝试做的例子的小提琴：

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应用于链接本身
• 绝对放置图标
• 为链接添加一些额外的填充，为图标
腾出空间

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