टेक्स्ट-ओवरफ्लो इलिप्सिस गतिशील चौड़ाई

के साथ काम नहीं करता है उम्मीद है कि कोई मदद कर सकता है।टेक्स्ट-ओवरफ्लो इलिप्सिस गतिशील चौड़ाई

मेरे पास 3 नेस्टेड div है। माता-पिता, बच्चे और बच्चों के बच्चे।

जो मैं पूरा करना चाहता हूं (उद्देश्य प्रासंगिक नहीं है) यह है कि उस बच्चे को माता-पिता की चौड़ाई (प्रतिशत) के आधार पर एक सापेक्ष चौड़ाई मिलती है और बच्चों के बच्चों के पास उस चौड़ाई के आधार पर ओवरफ्लो इलिप्सिस होना चाहिए। समस्या यह है कि अगर मैं बच्चों की चौड़ाई में% का उपयोग करता हूं तो इलिप्सिस काम नहीं करता है और यदि मैं पिक्सेल में चौड़ाई को परिभाषित करता हूं तो यह काम करता है।

यहाँ एचटीएमएल

<div class="a"> 
    <div class="b"> 
     <div class="c"> 
     Here should go some text long enough to ellipsis the overflow 
     </div> 
    </div> 
</div>

यहाँ है nonworking सीएसएस

.a { 
     border:black 1px solid; 
     float: left; 
     width: 122px; 
     display: table; 
     line-height: 14px; 
    } 
    .b { 
     width:100%; 
     color: black; 
     font-size: 14px; 
     text-transform: uppercase; 
     cursor: pointer; 
    } 
    .c { 
     line-height: 11px; 
     width: 100%; 
     text-overflow: ellipsis; 
     overflow: hidden; 
     white-space:nowrap; 
    }

अगर मैं 122px के लिए ख की चौड़ाई बदलने यह सही काम करता है (ध्यान दें कि 122px 100% के बराबर होना चाहिए) है हालांकि।

आप इसे यहाँ देख सकते हैं: http://jsfiddle.net/vNRpw/4/

धन्यवाद!

स्रोत

2013-05-08 Dan Stern

अनावश्यक downvote:

मैं सवाल यह मदद मिल सकती है किसी

यहाँ काम यह चेक हटाना अभ्यस्त। अगर मैंने जवाब अपडेट किया तो सभी को पता चलेगा कि इसे हल किया गया था, इसलिए कोई भी समय बर्बाद नहीं करेगा। इससे मुझे प्रश्न का उत्तर देने का समय मिलेगा। इसके अतिरिक्त, मैं दो दिनों के बाद स्वीकार किए गए अपने उत्तर को चिह्नित नहीं कर सकता। वैसे भी, सुझावों के लिए धन्यवाद –

पहले div में display: table; था जो इलिप्सिस के साथ परेशानी पैदा कर रहा था। यदि आप इसे हटा देते हैं तो इलिप्सिस ठीक काम करता है। http://jsfiddle.net/vNRpw/6/

स्रोत

2013-05-08 01:57:53

इस नियम ने मेरे कोड में इलिप्सिस के साथ परेशानी का एक टन पैदा किया। सबसे पहले यह इलिप्सिस काम करता है, जब तक कि मैंने डीआईवी का आकार बदल नहीं लिया। प्रदर्शन लेना: टेबल आउट पूरी तरह से काम किया। धन्यवाद! – Bildonia

डीआईवी की अगली पंक्ति में बिना किसी लाइन में मेरा डिस्प्ले http://stackoverflow.com/questions/26342411/how-to-display-an-image-next-to-some-texts – SearchForKnowledge

मैं तरफ इलिप्सिस जोड़ता हूं बूटस्ट्रैप का 'इनपुट-समूह' जिसमें 'प्रदर्शन: तालिका' है। 'डिस्प्ले: टेबल' को हटाने के अलावा, इसे हल करने का कोई और तरीका? * अपडेट *: यह एक और प्रश्न पर जाता है: http://stackoverflow.com/questions/9789723/css-text-overflow-in-a-table-cell –

क्या कुछ इस तरह के बारे में:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 

<style media="all"> 

.a { 
    border:black 1px solid; 
    float: left; 
    width: 50%; 
    line-height: 14px; 
} 
.b { 
    width:100%; 
    color: black; 
    font-size: 14px; 
    text-transform: uppercase; 
    cursor: pointer; 
} 
.c { 
    line-height: 11px; 
    width: 98%; 
    text-overflow: ellipsis; 
    overflow: hidden; 
    white-space:nowrap; 
} 

</style> 

</head> 
<body> 

<div class="a"> 
    <div class="b"> 
     <div class="c"> 
     Here should go some text long enough to ellipsis the overflow 
     </div> 
    </div> 
</div> 

</body> 
</html>

मुख्य परिवर्तन .c पर एक चौड़ाई से थोड़ा 100% से कम कर दिया गया था।

स्रोत

2013-05-08 01:53:31

मेरा एक पंक्ति में रहता है और अंडाकार दिखाता है। http://stackoverflow.com/questions/26342411/how-to-display-an-image-next-to-some-texts – SearchForKnowledge

टेक्स्ट-ओवरफ्लो इलिप्सिस गतिशील चौड़ाई

उत्तर

संबंधित मुद्दे