पाठ-अतिप्रवाह के साथ तत्वों के लिए एक शीर्षक टैग जोड़ें: अंडाकार

Question

मुझे यकीन है कि अगर यह आसानी से संभव है नहीं हूँ, लेकिन मैंने सोचा कि मैं सिर्फ मामले में पूछना होगा:

मैं की एक सूची पर निम्नलिखित सीएसएस नियम उपयोग कर रहा हूँ पाठ:

{ 
    width: 100px; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 

जैसी उम्मीद थी, किसी भी पाठ उस सूची के बाहर चला जाता है छोटा हो सकता है और एक अंडाकार अंत पर रखा होगा।

मैं केवल उन सूची आइटम उस सूची पर text-overflow शासन को गति प्रदान के लिए एक सक्रिय शीर्षक टैग करना चाहते हैं। तो आप माउस को किसी भी टेक्स्ट पर घुमा सकते हैं जिसे छोटा कर दिया गया है और इसके पूर्ण पाठ का टूलटिप देख सकता है।

कुछ मुझसे कहता है यह मुश्किल है, नहीं तो असंभव है, क्या करना है। हालांकि मुझे गलत सिद्ध होना अच्छा लगेगा। मैं अधिमानतः ऐसे समाधान की तलाश में हूं जो जितना संभव हो उतना छोटा जावास्क्रिप्ट का उपयोग करता है।

Answer 1

हम एक ऐसी ही कई व्यापक ellipsify है, जो ज्यादातर मामलों के लिए पूरी तरह से काम करता है का उपयोग करें। हम शीर्षक विशेषता (सभी तत्वों के लिए) भी लागू करते हैं। तत्व को लंबित करने पर केवल शीर्षक लागू करना वास्तव में मुश्किल है। नीचे दिया गया उदाहरण मानता है कि, यदि तत्व के माता-पिता के समान चौड़ाई है, तो हमें शीर्षक सेट करना चाहिए। अगर कथन के बिना यह हमेशा शीर्षक लागू करेगा।

document.querySelectorAll('.ellipsify').forEach(function (elem) { 
 
    if (parseFloat(window.getComputedStyle(elem).width) === parseFloat(window.getComputedStyle(elem.parentElement).width)) { 
 
    elem.setAttribute('title', elem.textContent); 
 
    } 
 
});

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

 
div { 
 
    width: 100px; 
 
}

<div> 
 
    <span class="ellipsify">dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</span> 
 
    <span class="ellipsify">dolor sit amet</span> 
 
</div>

Answer 2

आप एक छोटे से जावास्क्रिप्ट के साथ अतिप्रवाह की उपस्थिति के लिए माप सकते हैं और केवल title विशेषता अगर यह तत्व overflowed है | जोड़ने (यह नहीं काट दिया गया था)।

• शैली के साथ सामग्री को रोकें।
• कॉपी एक ही चौड़ाई के साथ एक छिपे हुए परीक्षण तत्व में सामग्री।
• परीक्षण तत्व पर रैपिंग को सीमित न करें, जिससे इसे ओवरफ़्लो हो सके।
• ऊंचाइयों की तुलना करें।

$(".smart-overflow").each(function() { 
 

 
    var elementToTest = $(this), 
 
    contentToTest = $(this).text(), 
 
    testElement = $("<div/>").css({ 
 
     position: "absolute", 
 
     left: "-10000px", 
 
     width: elementToTest.width() + "px" 
 
    }).appendTo("body").text(contentToTest); 
 

 
    if (testElement.height() > elementToTest.height()) { 
 
    elementToTest.attr("title", contentToTest); 
 
    } 
 
});

.smart-overflow { 
 
    width: 100px; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="smart-overflow"> 
 
    short text 
 
</div> 
 
<div class="smart-overflow"> 
 
    short text 
 
</div> 
 
<div class="smart-overflow"> 
 
    Longer text; there should be a tooltip here. 
 
</div> 
 
<div class="smart-overflow"> 
 
    More long text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum lorem eget justo tempus posuere. Integer ac sagittis nisi. Phasellus eu malesuada sapien. Aliquam erat volutpat. Nunc aliquet neque sagittis eros ullamcorper, 
 
    blandit facilisis magna gravida. Nulla a euismod turpis. 
 
</div> 
 
<div class="smart-overflow"> 
 
    More long text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum lorem eget justo tempus posuere. Integer ac sagittis nisi. Phasellus eu malesuada sapien. Aliquam erat volutpat. Nunc aliquet neque sagittis eros ullamcorper, 
 
    blandit facilisis magna gravida. Nulla a euismod turpis. 
 
</div> 
 
<div class="smart-overflow"> 
 
    short text 
 
</div> 
 
<div class="smart-overflow"> 
 
    short text 
 
</div>

_{jQuery संक्षिप्तता के लिए यहां इस्तेमाल किया है, लेकिन निश्चित रूप से की आवश्यकता नहीं।}

Answer 3

इस प्रकार मैंने समाधान से संपर्क किया।

यदि आप जावा-स्क्रिप्ट का उपयोग नहीं करना चाहते हैं।

यहाँ बेला के लिए एक लिंक है: https://jsfiddle.net/fryc4j52/1/

स्निपेट:

.ellipse{ 
 
    width: 100px; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
    margin:0; 
 
    padding:0; 
 
} 
 
.content li{ 
 
    margin:0; 
 
    padding:0; 
 
    overflow:hidden; 
 
} 
 
.ellipse:hover{ 
 
    width: auto; 
 
    border: 2px solid #eee; 
 
    box-shadow: 0px 3px 10px 0px black; 
 
    padding:2px; 
 
    white-space: normal; 
 
    word-break: break-word; 
 
    z-index:5; 
 
}

<ul class="content"> 
 
    <li class="ellipse">A very looooooooooooooooooooooooooooooooooooooong line.</li> 
 
    <li> Other text</li> 
 
    <li class="ellipse">A veryvvvvvvvvvvvvvvvvvvvvvvverrrrryyyyyyyyy looooooooooooooooooooooooooooooooooooooong line.</li> 
 
</ul>

Answer 4

document.querySelectorAll('.ellipsis').forEach(function (e) { 
     if (e.offsetWidth < e.scrollWidth) { 
      e.setAttribute('title', e.textContent); 
     } else{ 
      e.removeAttribute('title'); 
     } 
    }); 

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