dotdotdot अंडाकार भी जोड़ते हैं छोटा नहीं

मैं dotdotdot का उपयोग ऊंचाई निर्दिष्ट बॉक्स में पाठ काटनाdotdotdot अंडाकार भी जोड़ते हैं छोटा नहीं

<div class="product-description dotdotdot" style="word-wrap: break-word;"> 
    <div class="product-description-icon"> 
     <span> 
      <img src="product_gloves.png" alt="Gloves"> 
     </span> 
    </div> 
    <h4>Gloves</h4> 
    <p>Some gloves text...</p> 
</div>

jQuery:

मेरे product-description dotdotdot 100px की एक न्यूनतम ऊंचाई, और पाठ किया है अंत में इलिप्सिस, लेकिन पाठ को छोटा नहीं किया गया है और अभी भी बहुत सी जगह खाली है।

आपकी मदद

स्रोत

2016-01-14 Leeroy521

क्या कोई कारण है कि आप इलिप्स के लिए jquery प्लगइन का उपयोग कर रहे हैं और केवल सीएसएस का उपयोग नहीं कर रहे हैं? https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/ – ntgCleaner

मैं dotdotdot डाउनलोड किया है और README.md पीछा किया और यह ठीक काम कर रहा है (पर $(window).resize को छोड़कर) है के लिए धन्यवाद।

आप अपने प्रश्न के साथ अधिक सामग्री प्रदान करने की आवश्यकता हो सकती:

आप अपने मार्कअप की <head> में और सही क्रम में सभी आवश्यक .js फ़ाइलों सहित रहे हैं?
अपने jQuery एक $(document).ready(function() {अपनी स्क्रिप्ट});

मैं अभी तक dotdotdot स्क्रिप्ट पर गहराई में देखा नहीं किया है में लिपटे है। मेरा बिल्कुल इस स्क्रिप्ट का उपयोग फायरिंग जाता है:

$(document).ready(function() { 
    $(".wrapper").dotdotdot({ 
     // configuration goes here 
    }); 
});

एक नज़र में मैं अगर वर्ग के नाम .dotdotdot की अपनी पसंद समस्याएं उत्पन्न कर सकता है सोच रहा हूँ। शायद .product-description-wrapper पढ़ने के लिए अपनी कक्षा (एसएस) का नाम बदलें और उस वर्ग पर स्क्रिप्ट चलाएं।

आशा यह आप

स्रोत

2016-01-25 22:28:40 danMad

मैं jQuery के बजाय एक शुद्ध CSS3 के दृष्टिकोण का प्रयोग करेंगे मदद करता है।

यहां मेरे दो पसंदीदा SASS दोनों शब्द-रैपिंग या इलिप्सिस प्राप्त करने के लिए मिश्रण हैं;

@mixin word-wrap() { 
    word-break:  break-word; 
    -webkit-hyphens: auto; 
    -moz-hyphens: auto; 
    hyphens:   auto; 
} 

@mixin ellipsis() { 
    overflow: hidden; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
}

स्रोत

2016-01-27 12:45:49

dotdotdot अंडाकार भी जोड़ते हैं छोटा नहीं

उत्तर

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