Come rendere "overflow di testo: i puntini di sospensione" funzionano su div fluttuanti?

Question

Ho due pulsanti che fluttuano verso i lati opposti dello schermo, e vorrei che crollassero bene se lo schermo si restringe. Visivamente, questo è quello che voglio:

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

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

Purtroppo, in questo momento ho questo:

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

vorrei una soluzione CSS-only.

Ecco il mio HTML corrente e css (e qui una 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

il violino sotto lavori sulla base della seguente:

• il contenitore richiede una larghezza al fine di innescare l'overflow ed ellissi.
• per consentire alle scatole di comprimere continuamente Ho usato una larghezza percentuale.
• al rappresentano l'imbottitura ho usato il CSS3 box-sizing:border-box;

Nota che a causa della box-sizing:border-box;, questa soluzione non funziona su browser più vecchi.

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