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

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