具有文本溢出省略號的流體寬度

Question

我試圖使流體寬度的內部div和當溢出時使用...（使用ellipsis）。

要求：

1. .container已固定的已知寬度200px
2. .badge可以是任何寬度，但是max是30px。這是因爲這個div包含一個數字（從0到999）。這必須保持right（右移）。
3. .content and .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;  
}