Phát hiện tràn văn bản CSS: dấu ba chấm trong Firefox

Question

Tôi đang cố gắng phát hiện (qua javascript) khi tràn văn bản có hiệu lực. Sau khi nghiên cứu nhiều, tôi có một giải pháp làm việc, ngoại trừ trong bất kỳ phiên bản của Firefox:

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

Nếu bạn điều chỉnh trình duyệt để các lược được áp dụng, Chrome, Safari, thậm chí IE8 + sẽ cảnh báo rằng lược là hoạt động. Trong Firefox (mọi phiên bản tôi đã thử, bao gồm 17 và 18) không nhiều lắm. Firefox sẽ luôn cho bạn biết dấu ba chấm là KHÔNG hoạt động.

Các console.log() đầu ra cho thấy lý do tại sao:

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

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

Trong Firefox, scrollWidth là không bao giờ lớn hơn offsetWidth.

Điều gần nhất tôi có thể tìm thấy giải pháp là "Why are IE and Firefox returning different overflow dimensions for a div?" nhưng tôi đã sử dụng giải pháp được đề xuất.

Có ai cũng có thể làm sáng tỏ cách làm công việc này trong Firefox không?

---

EDIT: Ngoài câu trả lời @Countary bên dưới, tôi đã tìm thấy phương pháp thay thế không yêu cầu thay đổi đối với đánh dấu. Tuy nhiên, nó đang làm việc nhiều hơn một chút vì nó tạm thời bắt chước từng yếu tố để thực hiện đo lường đối với:

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

Bất kỳ ai có một lời nhận xét về hiệu quả của việc này? Nếu tôi có một trang của nhiều yếu tố tràn tiềm năng, điều này sẽ có tác động tiêu cực? Tôi muốn tránh việc sửa đổi đánh dấu hiện có nếu có thể, nhưng không phải vì chi phí xử lý JS quá mức trên mỗi lần tải trang.

Answer 1

bạn cần phải thêm div bên trong mỗi td để làm cho nó làm việc trong 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

Tôi thực sự đã viết một plugin jQuery để làm điều này. Nó chỉ đơn giản đặt title của phần tử mục tiêu cho toàn bộ văn bản nếu cắt ngắn, nhưng bạn có thể điều chỉnh nó cho nhu cầu chính xác của bạn:

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

Và để sử dụng, chỉ cần bao gồm js và gọi:

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

Điều này đã được sử dụng trong sản xuất, và đã không nhận thấy bất kỳ tác động xấu với hàng trăm yếu tố mục tiêu trên một trang.