CSSのテキストオーバーフローの検出：Firefoxの省略記号

Question

テキストオーバーフローが有効なときに（JavaScript経由で）検出しようとしています。多くの研究の後、私は、Firefoxのすべてのバージョンを除いて、実用的なソリューションを持っている：

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

省略記号が適用されるように、あなたは、クロム、サファリのブラウザを調整した場合は、さえIE8 +は省略記号があることを警告しますアクティブ。 Firefox（17と18を含む私が試したすべてのバージョン）ではそれほど多くはありません。 Firefoxは、省略記号が有効ではないことを常に通知します。

にconsole.log（）出力は理由を示していますFirefoxので

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

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

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

あなたは、私が実際にjQueryプラグインを書いたCSS

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

Jsfiddle

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

Answer 2

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

、それがFirefoxで動作させるために、それぞれのTDの内側のdivを追加する必要がありますこれをする。切り捨てられた場合、それは単にテキスト全体にターゲット要素の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(); 

これは生産で使用されており、何百ものターゲット要素がページに悪影響を及ぼすことに気づいていません。