Próbuję zrobić wewnętrzną podziałkę o szerokości płynu i... przy przepełnieniu (przy użyciuellipsis).

Wymagania:

.container ma ustaloną znaną szerokość200px.badge może mieć dowolną szerokość, ale max30px. Dzieje się tak, ponieważ ten div zawiera liczbę (od 0 do 999). To musi zostaćright (płynnie w prawo)..content i.badge musi być w tej samej linii.content będzie mieć wielokropek i nowrap. Musi zostaćleftKluczowe znaczenie:.contentszerokość =.containerszerokość -.badgeszerokość

Nie mogłem dostać#5 powyżej, aby się wydarzyło. Dowolny wskaźnik?

Mój kod poniżej albo sprawił.badge zawinąć w drugą linię lub.content po prostu nie rozszerza jego szerokości.

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

Połączyć: http://jsfiddle.net/qhoc/4w6wR/1/