유체 폭이 텍스트 오버 플로우 ellipsis 인 경우

Question

유체 폭이 내부 div이고 ... 인 경우 오버플로 할 때 (ellipsis 사용).

요구 사항 :

1. .container하는 고정했다 알려져 폭 200px
2. .badge는 폭이 될 수 있지만, 최대는 30px입니다. 이 div에는 숫자 (0에서 999까지)가 포함되어 있기 때문입니다. 이것은 right (float right)이어야합니다.
3. .content 및 .badge은 생략하고 파라미터 nowrap을해야합니다 같은 줄
4. .content에 있어야합니다. 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;  
}