टेक्स्ट-ओवरफ्लो का उपयोग करना: इलिप्सिस; जब माता-पिता इनपुट होता है तो माता-पिता div पर

Question

मेरे पास एकाधिक गैर-रैपिंग, इनलाइन बाल तत्वों को एक मूल div के भीतर है जिसमें सेट width और text-overflowellipsis पर सेट है।

जब अंतिम बच्चा एक एंकर टैग होता है, तो अंडाकार ठीक काम करते हैं, लेकिन जब यह इनपुट होता है, तो टेक्स्ट बस क्लिप करता है। चूंकि पिछले आइटम चरणीय चौड़ाई हैं, इसलिए मैं अंतिम इनपुट पर उचित अधिकतम चौड़ाई निर्धारित नहीं कर सकता।

.parent { 
 
    width: 120px; 
 
    background: #eee; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
}

<div class="parent"> 
 
    <span class="child1"> 
 
    <a href="#">link 1</a> text 
 
    <a href="#">Lorem ipsum dolor</a> 
 
    </span> 
 
</div> 
 
<div class="parent"> 
 
    <span class="child1"> 
 
    <a href="#">link 2</a> text 
 
    <input type="submit" class="request-topic-link" value="lorem-ipsum-dolor">    
 
    </span> 
 
</div>

कोई सुझाव? यहां एक JSFiddle है।

Answer 1

ठीक है, मैं यहां आया हूं। इसे आपके मार्कअप में कुछ समायोजन की आवश्यकता है, लेकिन इसके अलावा यह काम करता है।

क) प्रस्तुत इनपुट सुरक्षित रूप से बदला जा सकता है एक बटन के साथ भी अर्थ है कि जमा करें और आप अपनी आवश्यकताओं के इसे शैली दे सकते। जब से तुम चर सामग्री है एक span

भीतर लिपटे होने के लिए ख) साधारण पाठ किया गया है, यह करने के लिए एक ही रास्ता table-cells का उपयोग करना है ... एक table जाहिर भीतर लपेटा। table-layout:fixed का उपयोग करना चाल होगा यदि आपकी सामग्री परिवर्तनीय चौड़ाई नहीं थी। यही कारण है कि मैंने सभी टेबल-सेल्स में चौड़ाई 33% जोड़ दी जो कि उपयोग करने के लिए सिर्फ एक संकेतक है; टेबल-सेल्स सेट वैल्यू को नजरअंदाज कर देंगे और अभी भी उनकी सामग्री के आधार पर तदनुसार और मनमाने ढंग से विस्तार करेंगे। एचटीएमएल:

<div class="parent"> 
    <span class="child1"> 
    <a href="#">link 1</a> text <a href="#">Lorem ipsum dolor</a>    </span> 
</div> 
<div class="parent"> 
    <span class="child1"> 
    <a href="#">link 1</a><span> textdfgg </span> 
    <button type="submit" class="request-topic-link">lorem-ipsum-dolor</button> 
    </span> 
</div> 

सीएसएस:

.parent { 
    width: 120px; 
    background: #fff; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    overflow: hidden; 
} 

.child1 { 
    display: table; 
    width: 100%; 
} 

.child1 > * { 
    display: table-cell; 
    width: 33%; 
} 

button { 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    overflow: hidden; 
    display: inline-block; 
    width: 100%; 
} 

कार्य बेला: http://jsfiddle.net/5muarho3/3/