"text-overflow : ellipsis"를 플로팅 div에서 사용하는 방법은 무엇입니까?

Question

두 개의 버튼이 화면의 반대쪽에 떠 다니고 있으며, 화면이 축소되면 화면이 잘리는 것처럼 보이게하고 싶습니다. 시각적으로,이 내가 원하는 무엇인가 : 불행하게도

________________________________________________________________ 
|                | 
| |LongTextButtonName|     |LongTextButtonName| | When the screen 
|_______________________________________________________________| is large 

_______________________________________ 
|          | 
| |LongTextBu...| |LongTextBu...| | When the screen is small 
|______________________________________| 

, 지금 나는이 얻을 :

________________________________________ 
|          | 
| |LongTextButtonName|    | 
|    |LongTextButtonName| | 
|_______________________________________| 

나는 CSS 전용 솔루션을하고 싶습니다.

여기에 내 현재 HTML과 CSS (그리고 여기 fiddle) :

<div class="button-container"> 
    <div class="left-button"><a>LongTextButtonName</a></div> 
    <div class="right-button"><a>LongTextButtonName</a></div> 
</div> 

.button-container { 
    min-width:320px; 
} 
.button-container > div { 
    border: 1px solid gray; 
    background-color: orange; 
    min-width: 160px; 
    padding: 8px; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 
.left-button { 
    float: left; 
} 
.right-button { 
    float: right; 
} 

Answer 1

에 따라 작품 아래의 바이올린 다음 컨테이너가 오버 플로우를 유발하기 위해 폭을 필요로

• 및 줄임표.
• 상자를 계속 허용하려면 백분율 너비를 사용했습니다.
• 이 패딩을 고려하여 나는 CSS3에게 box-sizing:border-box;의 때문에,이 솔루션은 이전 버전의 브라우저에서 작동하지 않습니다 box-sizing:border-box;

주를 사용했다.

.button-container { 
    min-width:320px; 
} 
.button-container > div { 
    border: 1px solid gray; 
    background-color: orange; 
    max-width: 50%; 
    padding: 8px; 
    white-space: nowrap; 
    overflow: hidden; 
    box-sizing:border-box; 
    text-overflow: ellipsis; 
} 
.left-button { 
    float: left; 
} 
.right-button { 
    float: right; 
} 

http://jsfiddle.net/UfxgZ/1/