Jak ustawić "text-overflow: ellipsis" na pływających elementach div?

Question

Mam dwa przyciski unoszące się po przeciwnych stronach ekranu, i chciałbym, żeby się zapadły, jeśli ekran się skurczy. Wizualnie jest to, co chcę:

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

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

Niestety, teraz mam to:

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

Chciałbym rozwiązanie CSS tylko.

Oto mój obecny html i css (i tu jest 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

skrzypcach poniżej prac w oparciu o następujące elementy:

• pojemnik wymaga szerokości w celu wywołania przepełnienia i elipsa.
• aby pozwolić na ciągłe zwijanie skrzynek Użyłem szerokości procentowej.
• celu uwzględnienia padding Użyłem CSS3 box-sizing:border-box;

Należy pamiętać, że ze względu na box-sizing:border-box;, to rozwiązanie nie będzie działać na starszych przeglądarek.

.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/