पाठ अतिप्रवाह अंडाकार: से बचने के शब्द को तोड़ने

Question

मेरे वेबपेज में मैं निश्चित चौड़ाई और निम्नलिखित सीएसएस का उपयोग कर के साथ एक div है:

width: 200px; 
overflow: hidden; 
text-overflow: ellipsis; 
white-space: nowrap; 

अंडाकार काम कर रहा है, समस्या यह है कि अंतिम शब्द में कटौती है, और मैं एक पूर्ण शब्द के फाइनल में इलिप्सिस (...) डालना चाहता था।

उदाहरण के लिए, यदि मेरे पास टेक्स्ट है: "स्टैक ओवरफ्लो सबसे अच्छा है", और यदि इसे अंत में कटौती करने की आवश्यकता है, तो मैं इसे "स्टैक ओवरफ्लो है ..." के बजाय "स्टैक ओवरफ्लो है" हो ... "

Answer 1

मुझे डर है कि यह असंभव है। एक बार text-overflow: ellipsis-word था, जो ऐसा ही करेगा, लेकिन इसे ब्राउज़र में लागू नहीं किया गया था और इसे CSS3 ड्राफ्ट से हटा दिया गया था।

Answer 2

एक jQuery प्लगइन है जो इसे करता है, जिसे dotdotdot कहा जाता है।

यह मल्टी-लाइन टेक्स्ट के लिए भी काम करता है, और टेक्स्ट रीफ्लो होने पर प्रतिक्रियात्मक रूप से अनुकूलन करता है। अगर स्क्रीन का आकार बदलता है। इसमें पथनामों का स्मार्ट कटाव भी शामिल है उदा। http://example.com/some/long/.../path.html

---

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

लेकिन 99% समय, प्लगइन तेज़ और मजबूत लगता है।

Answer 3

बेशक यह संभव है। (यदि आप अपने मार्कअप थोड़ा बदलने के लिए तैयार हैं, तो।)

https://jsfiddle.net/warphLcr/

<style> 
    .foo { 
    /* Make it easy to see where the cutoff point is */ 
    border: 2px solid #999; 

    padding-right: 18px; /* Always have room for an ellipsis */ 
    width: 120px; 
    height: 1.1em; /* Only allow one line of text */ 
    overflow: hidden; /* Hide all the text below that line */ 
    background-color: #fff; /* Background color is required */ 
    } 
    .foo > span { 
    display: inline-block; /* These have to be inline block to wrap correctly */ 
    position: relative; /* Give the ellipsis an anchor point so it's positioned after the word */ 
    background-color: #fff; /* Cover the ellipsis of the previous word with the same background color */ 
    white-space: pre; /* Make sure the only point where wrapping is allowed is after a whole word */ 
    } 
    .foo > span:after { 
    position: absolute; /* Take the ellipsis out of the flow, so the next item will cover it */ 
    content: "…"; /* Each span has an ellipsis */ 
    } 
    .foo > span:last-child:after { 
    content: ""; /* Except for the last one */ 
    } 
</style> 

<div class="foo"> 
    <!-- These *must not* have white space between them, or it will collapse to a space before the next word, and the ellipsis will become visible --> 
    <span>stackoverflow</span><span> is</span><span> the</span><span> best</span> 
</div>