Ширина жидкости с эллипсисом переполнения текста

Question

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

Требования:

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

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

Мой код ниже либо сделал .badge для обертывания во второй строке, либо .content просто не расширяет свою ширину.

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

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

Answer 1

Попробуйте это:

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

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

.content {  
    text-overflow: ellipsis; 
    white-space: nowrap; 
    overflow: hidden;  
    background: green; 
} 

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