see jsfiddle: http://jsfiddle.net/9v8faLeh/1/

I have two elements .text and .badge in a .container with a limit width:

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

the .badge element may not exist in a .container according to the data. if a .badge exist, I want the .badge element to float to right. and if the .text is too long, the text should ellipsis.

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

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

if you open the jsfiddle link in Chrome or IE, it displays correctly as my expectation.
but if open in Firefox, the .text and .badge are overlay if the text is so long.

I don't want to use any JavaScript. how can I achieve the same result in FireFox?