“文本溢出：省略号”在带有浮动元素的 Firefox 中效果不佳

Question

见 jsfiddle：http://jsfiddle.net/9v8faLeh/1/

我在 .container 中有两个元素 .text 和 .badge，宽度有限制：

<div class="container">
    <span class="badge">(*)</span>
    <span class="text">this is a long long long long text.</span>
</div>

根据数据，.badge 元素可能不存在于.container 中。如果存在.badge，我希望.badge 元素向右浮动。如果.text 太长，则文本应省略。

.container {
    width: 150px;
    border: 1px solid;
    padding: 5px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.badge {
    float: right;
    margin-left: 5px;
}

如果您在 Chrome 或 IE 中打开 jsfiddle 链接，它会按照我的预期正确显示。
但是如果在 Firefox 中打开，如果文本太长，.text 和 .badge 会被覆盖。

我不想使用任何 JavaScript。如何在 FireFox 中获得相同的结果？

Answer 1

只需将<span class="badge">(*)</span> 放入<span class="text">this is a long long long long text.</span> 中，如下所示：

<span class="text">this is a long long long long text.<span class="badge">(*)</span></span>

然后在 CSS 中

.container {
    width: 150px;
    border: 1px solid;
    padding: 5px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display:block;
}
.badge {
    display:inline-block;
}
.hide {
    display: none;
}