м пытается сделать внутренний div с шириной жидкости и... при переполнении (используяellipsis).

Требования:

.container имеет фиксированную известную ширину200px.badge может быть любой ширины, но максимальная30px, Это потому, что этот div содержит число (от 0 до 999). Это должно остатьсяright (плавать справа)..content а также.badge должен быть в одной строке.content будет иметь многоточие и Nowrap. Должен остатьсяleftКлюч важно:.contents ширина = '.containers ширина - '.badgeширина s

Я не мог получить#5 выше, чтобы случиться. Есть указатель?

Мой код ниже либо сделал.badge обернуть во второй строке или.content просто нет расширить его ширину.

HTML:

    
        Donec id elit non mi porta gravida at eget metus
    
    
        5
    

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

Ссылка на сайт: http://jsfiddle.net/qhoc/4w6wR/1/