html - "text-overflow: ellipsis"在带有 float 元素的 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;
}