सीएसएस टेक्स्ट-ओवरफ़्लो का पता लगाना: फ़ायरफ़ॉक्स में ellipsis

Question

टेक्स्ट-ओवरफ़्लो प्रभावी होने पर मैं (जावास्क्रिप्ट के माध्यम से) का पता लगाने की कोशिश कर रहा हूं। काफी अनुसंधान के बाद, मैं फ़ायरफ़ॉक्स के किसी भी संस्करण में छोड़कर एक काम समाधान है,:

http://jsfiddle.net/tonydew/mjnvk/

आप ब्राउज़र को समायोजित यदि ऐसा है कि अंडाकार लागू किया जाता है, क्रोम, सफारी, यहां तक ​​कि IE8 + चेतावनी देगा कि अंडाकार है सक्रिय। फ़ायरफ़ॉक्स में (मैंने जो भी संस्करण कोशिश की है, जिसमें 17 और 18 शामिल हैं) इतना नहीं। फ़ायरफ़ॉक्स हमेशा आपको बताएगा कि इलिप्सिस सक्रिय नहीं है।

console.log() उत्पादन से पता चलता है कि क्यों:

Firefox (OS X): 
116/115 - false 
347/346 - false 

Chrome (OS X): 
116/115 - false 
347/851 - true 

Firefox में, scrollWidth offsetWidth से कभी नहीं अधिक है।

समाधान के लिए मुझे सबसे नज़दीकी चीज़ मिल सकती है "Why are IE and Firefox returning different overflow dimensions for a div?" लेकिन मैं पहले ही प्रस्तावित समाधान का उपयोग कर रहा हूं।

क्या कोई भी फ़ायरफ़ॉक्स में यह काम कैसे करें इस पर कुछ प्रकाश डाल सकता है?

---

संपादित करें: नीचे @ सीज़री उत्तर के अलावा, मुझे एक विधि मिली है जिसमें मार्कअप में बदलाव की आवश्यकता नहीं है। हालांकि, यह एक छोटे से अधिक काम कर रहा है, क्योंकि यह अस्थायी रूप से प्रत्येक तत्व के खिलाफ माप करने के लिए क्लोन: इस की दक्षता पर एक टिप्पणी है

$(function() { 
    $('.overflow').each(function(i, el) { 
     var element = $(this) 
         .clone() 
         .css({display: 'inline', width: 'auto', visibility: 'hidden'}) 
         .appendTo('body'); 

     if(element.width() > $(this).width()) { 
      $(this).tooltip({ 
       title: $(this).text(), 
       delay: { show: 250, hide: 100 }, 
      }); 
     } 
     element.remove(); 
    }); 
}); 

http://jsfiddle.net/tonydew/gCnXh/

किसी? यदि मेरे पास कई संभावित अतिप्रवाह तत्वों का एक पृष्ठ है, तो क्या इसका नकारात्मक प्रभाव होगा? यदि मैं कर सकता हूं, तो मौजूदा मार्कअप को संशोधित करने से बचाना चाहता हूं, लेकिन प्रत्येक पेज लोड पर अत्यधिक जेएस प्रोसेसिंग की कीमत पर नहीं।

Answer 1

आप प्रत्येक टीडी अंदर div जोड़ने के लिए यह फ़ायरफ़ॉक्स में काम करने की जरूरत है,

<td class="first"><div>Here is some text</div></td> 
<td class="second"> 
    <div>Here is some more text. A lot more text than 
    the first one. In fact there is so much text you'd think it was a 
    waste of time to type all ofit. 
    </div> 
</td> 

सीएसएस

td div { 
    white-space: nowrap; 
    text-overflow: ellipsis; 
    overflow:hidden; 
    width:100%; 
} 

Jsfiddle

http://jsfiddle.net/mjnvk/7/

Answer 2

मैं वास्तव में एक jQuery प्लगइन लिखा था यह करने के लिए। यह बस पूरे कलेवर के लिए लक्ष्य तत्व की title सेट करता है, तो छोटा कर दिया है, लेकिन आप अपने सटीक की जरूरत के लिए यह अनुकूलित कर सकते हैं:

/** 
* @author ach 
* 
* Sets the CSS white-space, overflow, and text-overflow properties such that text in the selected block element will 
* be truncated and appended with an ellipsis (...) if overflowing. If the text is truncated in such a way, the 
* selected element's 'title' will be set to its full text contents and the cursor will be set to 'default'. 
* For this plugin to work properly, it should be used on block elements (p, div, etc.). If used on a th or td element, 
* the plugin will wrap the contents in a div -- in this case, the table's 'table-layout' CSS property should be set to 'fixed'. 
* 
* The default CSS property values set by this plugin are: 
*  white-space: nowrap; 
*  overflow: hidden; 
*  text-overflow: ellipsis 
* 
* @param cssMap A map of css properties that will be applied to the selected element. The default white-space, 
* overflow, and text-overflow values set by this plugin can be overridden in this map. 
* 
* @return The selected elements, for chaining 
*/ 

$.fn.truncateText = function(cssMap) { 
    var css = $.extend({}, $.fn.truncateText.defaults, cssMap); 

    return this.each(function() { 
     var $this = $(this); 
     //To detect overflow across all browsers, create an auto-width invisible element and compare its width to the actual element's 
     var element = $this.clone().css({display: 'inline', width: 'auto', visibility: 'hidden'}).appendTo('body'); 
     if (element.width() > $this.width()) { 
      //If a th or td was selected, wrap the content in a div and operate on that 
      if ($this.is("th, td")) { 
       $this = $this.wrapInner('<div></div>').find(":first"); 
      } 
      $this.css(css); 
      $this.attr("title", $.trim($this.text())); 
      $this.css({"cursor": "default"}); 
     } 
     element.remove(); 
    }); 
}; 
$.fn.truncateText.defaults = { 
    "white-space" : "nowrap", 
    "overflow"  : "hidden", 
    "text-overflow" : "ellipsis" 
}; 

और उपयोग करने के लिए, बस जे एस शामिल हैं और कहते हैं:

$(".override").truncateText(); 

इसका उत्पादन में उपयोग किया गया है, और किसी पृष्ठ पर सैकड़ों लक्षित तत्वों के साथ किसी भी दुष्प्रभाव को नहीं देखा है।