Css Firefox上的字体图标是重叠的截断文本

我正在尝试在我的页面中创建一个链接，该链接由文本和字体图标组成。这个链接不能绕过给定的宽度，所以我创建了一个css类来截断文本。此外，图标需要向右对齐（我使用的是

float:right

）

这是我试图做的一个例子：

代码如下：

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

.截断{
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
}
.divclass{
宽度：100px；
}

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

---

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

我可能会用稍微不同的方式来解决这个问题：

• 将

  宽度

  和

  文本溢出

  应用于链接本身
• 绝对定位图标
• 在链接右侧添加一些额外的填充，以便为图标留出空间

---

我正试图找到一个解决方案，而我已经找到了解决方案的一半完美的谢谢@CBroe！：）