Estoy tratando de hacer div interior con ancho de fluido y... cuando se desborda (usandoellipsis).

Requerimientos:

.container tiene ancho fijo conocido200px.badge podría ser cualquier ancho pero máximo es30px. Esto se debe a que esta división contiene un número (de 0 a 999). Esto debe permanecerright (flotar derecho)..content y.badge debe estar en la misma linea.content Habrá puntos suspensivos y nowrap. Debe quedarseleftClave importante:.content's ancho =.containerel ancho de.badgeancho de

No pude conseguir#5 encima de suceder Cualquier puntero?

Mi código de abajo hizo el.badge para envolver en segunda linea o.content Simplemente no expande su ancho.

HTML:

<div class=container>
    <div class=content>
        Donec id elit non mi porta gravida at eget metus
    </div>
    <div class=badge>
        5
    </div>
</div>

CSS:

.container {
    width: 200px;
    background: gray;
}

.content {
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: 170px;
    background: green;
}

.badge {
    display: inline-block;
    max-width: 30px;
    background: yellow;
    float: right;
}

Enlazar: http://jsfiddle.net/qhoc/4w6wR/1/