सीएसएस टेक्स्ट-ओवरफ्लो इलिप्सिस

Question

प्रदर्शित नहीं कर रहा है मेरे पास कुछ आंतरिक सामग्री के साथ एक div है जिसे मुझे ओवरलैफ होने पर एक इलिप्सिस होना चाहिए। मैंने इसे अन्य तत्वों पर कई बार किया है लेकिन किसी कारण से यह अपेक्षित व्यवहार नहीं कर रहा है।

इसके अलावा, मैंने उद्देश्य पर white-space:nowrap; छोड़ा क्योंकि सामग्री तब अवधि के भीतर अगली पंक्ति में नहीं टूटती है, नतीजतन मैं केवल इलिप्सिस शुरू होने से पहले 2-3 शब्द देखता हूं। मैं पाठ को मूल कंटेनर की पूरी ऊंचाई तक फैलाना चाहता हूं, फिर उन सीमाओं से परे मौजूद सामग्री के लिए इलिप्सिस शुरू करें।

यहाँ एक काम कर डेमो है: http://jsfiddle.net/sadmicrowave/DhkSA/

सीएसएस:

.flow-element{ 
    position:absolute; 
    font-size:12px; 
    text-align:center; 
    width:75px; 
    height:75px; 
    line-height:70px; 
    border:1px solid #ccc; 
} 

.flow-element .inner{ 
    position:absolute; 
    width:80%; 
    height:80%; 
    border:1px solid blue; 
    top:0px; 
    bottom:0px; 
    left:0px; 
    right:0px; 
    margin:auto; 
    text-align:center; 
} 

.flow-element .long{ 
    float:left; 
    height:50px; 
    width:100%; 
    line-height:12px; 
    border:1px solid red; 
    text-overflow:ellipsis; 
    overflow:hidden; 
} 

HTML:

<a class='flow-element' style='top:100px; left:50px;'> 
    <div class='inner'> 
    <span class='long'>Box 1 and some other content that should wrap and do some other stuff</span> 
    </div> 
</a> 

किसी की मदद कृपया कर सकते हैं। मैं लाल उल्लिखित अवधि के भीतर जितना संभव हो उतना पाठ प्रदर्शित करने, जबकि अग्रिम

में एक अंडाकार टेक्स्ट सामग्री के कंटेनर overflows ...

धन्यवाद होने

Answer 1

आप text-overflow: ellipsis लागू नहीं कर सकते तत्वों (अवधि) इनलाइन करने के लिए, यह ब्लॉक तत्वों के साथ इस्तेमाल किया जा सकता है जब text-overflow: ellipsis;

जांच का उपयोग कर यह केवल (div)

और भी white-space:nowrap; उपयोग करते हैं, मैं परिवर्तित कर दिया है आपके भीतरी अवधि div के लिए, बस अवधारणा के सबूत

http://jsfiddle.net/3CgcH/5/

मैं तुम क्यों अवधि का इस्तेमाल किया है पता नहीं है के लिए, लेकिन अपने तर्क के अनुसार आपको चांग कर सकते हैं जैसा कि मैंने सुझाव दिया तों

अद्यतन:

कोई है कि प्रश्न में अगर मैं white-space: nowrap; डाल तत्व को पार करने वाली तो text-overflow: ellipsis: तो काम कर रहा है हो सकता है मैं गलत हूँ लगता होगा, लेकिन यह क्योंकि प्रश्नकर्ता मामला नहीं है स्पैन टैग में float: left का उपयोग किया गया है जिसका अर्थ है कि स्पैन टैग को बॉक्स ब्लॉक में परिवर्तित किया जाएगा और सामान्य ब्लॉक स्तर तत्व की तरह काम किया जाएगा, जो भी करना गलत है क्योंकि यदि आपको ब्लॉक तत्व व्यवहार की आवश्यकता है तो ब्लॉक स्तर तत्व

का उपयोग करें

संदर्भ:

http://www.w3.org/TR/CSS2/visuren.html#propdef-float

http://dev.w3.org/csswg/css3-ui/#text-overflow

Answer 2

white-space:nowrap; अपने .inner div में जोड़े की जरूरत है।

Answer 3

इस जोड़ें:

white-space:nowrap; 

.flow-तत्व को

तो ओवरफ़्लो- ellispsis काम करता है .long।

Answer 4

मुझे लगता है कि आपको समस्या मिल जाएगी पाठ-संरेखण के कारण: केंद्र;