Rilevamento di overflow di testo CSS: puntini di sospensione in Firefox

Question

Sto cercando di rilevare (tramite javascript) quando è attivo l'overflow del testo. Dopo molte ricerche, ho una soluzione di lavoro, salvo in ogni versione di Firefox:

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

Se si regola il browser in modo che si applica i puntini di sospensione, Chrome, Safari, anche IE8 + avviserà che i puntini di sospensione è attivo. In Firefox (ogni versione che ho provato, compresi i 17 e 18) non così tanto. Firefox ti dirà sempre che i puntini di sospensione NON è attivo.

Il console.log() uscita mostra perché:

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

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

In Firefox, scrollWidth non è mai superiore a offsetWidth.

La soluzione più vicina a una soluzione è "Why are IE and Firefox returning different overflow dimensions for a div?" ma sto già utilizzando la soluzione proposta.

Qualcuno può far luce su come farlo funzionare anche in Firefox?

---

MODIFICA: oltre alla risposta @Cezary di seguito, ho trovato un metodo che non richiede modifiche al markup. Tuttavia, si sta facendo un po 'di lavoro perché clona temporaneamente ogni elemento di fare la misura contro:

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

Chiunque avere un commento sulla efficienza di questo? Se ho una pagina di molti potenziali elementi di overflow, questo avrà effetti negativi? Mi piacerebbe evitare di modificare il markup esistente se posso, ma non a scapito dell'eccessiva elaborazione JS su ogni caricamento di pagina.

Answer 1

è necessario aggiungere div all'interno di ogni td per farlo funzionare in 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

realtà ho scritto un plugin per jQuery per fare questo. Essa stabilisce semplicemente la title dell'elemento di destinazione a tutto il testo, se troncato, ma è possibile adattarlo alle proprie esigenze precise:

/** 
* @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" 
}; 

E da usare, basta includere i js e chiamare:

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

Questo è stato utilizzato in produzione e non ha notato effetti negativi con centinaia di elementi di destinazione su una pagina.