"Metin taşması: ellipsis" nasıl yapılır?

Question

Ekranın karşıt taraflarına iki düğmeyle yaklaştım ve ekran küçülüyorsa güzel bir şekilde daraltılmasını istiyorum. Görsel olarak, bu benim istediğim şey: Maalesef

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

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

, şimdi ben bu olsun:

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

bir css-tek çözüm istiyorum.

İşte benim şimdiki html ve css (ve burada bir 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

dayalı işler aşağıda keman aşağıdadır: konteyner taşması tetiklemek için bir genişlik gerektirir

• ve elips. Kutuların sürekli olarak çökmesine izin vermek için
• Bir genişlik genişliği kullanmıştım.
• dolgu hesaba Ben CSS3 box-sizing:border-box; yüzünden, bu çözüm eski tarayıcıları üzerinde çalışmaz box-sizing:border-box;

Not kullandık.

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