फ़्लोटिंग divs पर "टेक्स्ट-ओवरफ्लो: इलिप्सिस" कैसे काम करें?

Question

मेरे पास स्क्रीन के विपरीत किनारे पर तैरने वाले दो बटन हैं, और यदि स्क्रीन कम हो जाती है तो मैं उन्हें अच्छी तरह से पतन करना चाहता हूं।

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

मैं एक सीएसएस-एकमात्र समाधान चाहते हैं: अभी मैं इस मिल

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

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

दुर्भाग्य से,: दिखने में, यह मैं क्या चाहते है।

यहाँ मेरे वर्तमान HTML और सीएसएस है (और यहाँ है एक 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/