檢測CSS文本溢出：Firefox中的省略號

Question

我試圖檢測（通過JavaScript）何時文本溢出生效。經過大量的研究，我有一個有效的解決方案，但在Firefox中的任何版本：

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

如果調整瀏覽器，以便省略號應用，瀏覽器，Safari瀏覽器，甚至IE8 +會提醒省略號是活性。在Firefox中（我試過的每個版本，包括17和18）都不是。 Firefox會一直告訴你省略號是不活躍的。

的執行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?」，但我已經在使用所提出的解決方案。

任何人都可以闡明如何使這項工作在Firefox的請點？

---

編輯：除了@Cezary回答下面，我發現了一種方法，不需要更改標記。然而，它做更多的工作，因爲它暫時克隆每個元素做測量反對：

$(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/

任何人有這樣的效率有何評論？如果我有許多潛在溢出元素的頁面，這是否會產生負面影響？如果可以的話，我想避免修改現有的標記，但是不要以每個頁面加載過多的JS處理爲代價。

Answer 1

你需要添加DIV每個TD內，使其工作在Firefox，

<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> 

CSS

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" 
}; 

和使用，只需JS和撥打：

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

這已被用於生產，並沒有注意到頁面上數百個目標元素的任何不良影響。