CSS metin taşma algılaması: Firefox'ta elips Kaydırma

Question

Metin taşması etkin olduğunda (javascript aracılığıyla) algılamaya çalışıyorum. Çok araştırma sonra Firefox herhangi bir sürümü haricinde çalışan bir çözüm var: Eğer tarayıcı ayarlarsanız üç nokta uygulandığını

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

, Chrome, Safari hatta IE8 + üç nokta olduğunu uyaracaktır böylece aktif. Firefox'ta (17 ve 18 dahil olmak üzere denediğim her versiyon) çok fazla değil. Firefox size her zaman elipsin aktif olmadığını söyleyecektir.

Firefox'ta

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

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

, scrollWidth offsetWidth daha asla büyüktür: neden

console.log() çıktısı gösterilmektedir.

Çözüm bulabildiğim en yakın şey "Why are IE and Firefox returning different overflow dimensions for a div?" ama önerilen çözümü zaten kullanıyorum.

Bu işin Firefox'ta nasıl yapılacağı konusunda biraz ışık tutabilir mi lütfen?

---

DÜZENLEME: Aşağıdaki @Cezary answer'ye ek olarak, işaretlemede değişiklik gerektirmeyen bir yöntem buldum. Bu etkinliği hakkında bir yorum var

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

Kimse Yok: geçici karşı ölçümünü yapmak için her bir öğeyi klonlar çünkü Ancak, biraz daha çalışma yapıyor? Bir çok potansiyel taşma elemanına sahip bir sayfam varsa, bunun olumsuz etkileri olacak mı? Yapabiliyorsam varolan işaretlemeyi değiştirmekten kaçınmak istiyorum, ancak her sayfa yükünde aşırı JS işlenmesi pahasına değil.

bunu içinde ateş çalışması için her td içine div eklemem gerekiyor

Answer 1

,

<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

Aslında bir jQuery eklentisi yazdım Bunu yapmak için. kesilmiş eğer sadece metnin tamamına hedef elemanın title ayarlar ancak tam ihtiyaçları için adapte edebilir:

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

Ve kullanmak yeterlidir js dahildir ve çağrı:

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

Bu, üretimde kullanıldı ve bir sayfada yüzlerce hedef öğe ile herhangi bir yan etki görülmedi.