令人敬畏的字体图标与 Firefox 上的截断文本重叠

Question

我正在尝试在我的页面中创建一个链接，该链接由文本后跟一个很棒的字体图标组成。这个链接不能绕过给定的宽度，所以我创建了我的 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/