टेक्स्ट-ओवरफ़्लो

Question

CSS3 text-overflow प्रस्तुत करता है ताकि आप अतिप्रवाह पाठ को छुपा सकें और यहां तक ​​कि अंडाकार भी जोड़ सकें।

यदि टेक्स्ट बह रहा है और छुपा हुआ है, तो मैं इसे कवर करते समय टूलटिप के रूप में दिखाना चाहता हूं।

ऐसा करने का सबसे आसान तरीका यह है कि पाठ को title तत्व में विशेषता जोड़ें। हालांकि यह टेक्स्ट दिखाएगा कि यह बह रहा है या नहीं।

मैं केवल अतिप्रवाह होने पर टूलटिप दिखाना चाहता हूं।

इसलिए यदि मैं इस किया था:

<span>some text here</span> 
<span>some more text here</span> 

और इसे इस तरह गाया:

यहाँ

कुछ पाठ कुछ और ...

पहले एक कोई टूलटिप नहीं होगा क्योंकि इसकी आवश्यकता नहीं है और दूसरे में एक टूलटिप होगा जो दिखाता है:

यहाँ

कुछ और पाठ इस सेट करने के लिए कोई तरीका है?

Answer 1

आप इसे अकेले सीएसएस के साथ नहीं कर सकते हैं, और मुझे लगता है कि कोई जावास्क्रिप्ट समाधान इस बात पर निर्भर करेगा कि आपका एचटीएमएल कैसे संरचित है। #foo तत्व अपने text-overflow घोषणा होने, और bar वर्ग एक white-space: nowrap घोषणा होने के साथ

<div id="foo"> 
    <span class="bar">Lorem ipsum dolor sit amet, consectetur.</span> 
    <span class="bar">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span> 
</div> 

: हालांकि, अगर आपके पास एचटीएमएल इस तरह संरचित। आप इस jQuery का उपयोग कर की तरह कुछ करने के लिए सक्षम होना चाहिए:

var foo = $("#foo"); 
var max_width = foo.width(); 
foo.children().each(function() { 
    var $this = $(this); 
    if ($this.width() > max_width) { 
    $this.attr("title", $this.text()); 
    } 
}); 

देखें: http://jsbin.com/alepa3