带有文本溢出省略号的流体宽度

Question

我正在尝试使用流体宽度创建内部div并在溢出时使用...（使用ellipsis）。

要求：

1. .container已修复已知宽度200px
2. .badge可以是任意宽度，但最大值为30px。这是因为这个div包含一个数字（从0到999）。这必须保持right（向右浮动）。
3. .content和.badge必须在同一行
4. .content将有省略号和nowrap。必须留下left
5. 重要提示： .content的宽度= .container的宽度 - .badge的宽度

我无法让#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;    
}