浮動小数点のdivで "text-overflow：省略記号"を使用するにはどうすればよいですか？

Question

私は画面の両側に浮かぶ2つのボタンを持っています。画面が縮小するとうまく崩壊するようにしたいと思います。視覚的に、これは私が欲しいものです：

残念ながら

________________________________________________________________ 
|                | 
| |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

に基づいた作品以下フィドル以下：コンテナがオーバーフローを引き起こすために幅を必要と

• と省略記号。
• ボックスを連続して折りたたむことができるように、私はパーセンテージ幅を使用しました。私は理由box-sizing:border-box;のため、この解決策は、古いブラウザでは動作しないことCSS3 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/