[解決済み】HTMLのtext-overflowの省略記号の検出

質問

あるページにブロック要素のコレクションがあります。これらはすべてCSSルールのwhite-space, overflow, text-overflowが設定されており、はみ出したテキストは切り捨てられ、省略記号が使用されるようになっています。

しかし、すべての要素がオーバーフローするわけではありません。

javascriptを使って、どの要素がオーバーフローしているかを検出することはできますか？

ありがとうございます。

追記：私が扱っているHTML構造の例。

<td><span>Normal text</span></td>
<td><span>Long text that will be trimmed text</span></td>

SPAN要素は常にセルに収まり、省略ルールが適用されています。SPANのテキストコンテンツに省略記号が適用されたことを検出したいのです。

どのように解決するのですか？

昔々、このようなことをする必要があったのですが、私が出会ったクロスブラウザで信頼できる唯一の解決策は、ハックジョブでした。私はこのようなソリューションの最大のファンではありませんが、確かに何度も何度も正しい結果を生み出しています。

このアイデアは、要素を複製し、境界の幅をすべて取り除き、複製した要素が元の要素より広いかどうかをテストすることです。もしそうなら、その要素は切り捨てられたことになります。

例えば、jQueryを使用した場合。

var $element = $('#element-to-test');
var $c = $element
           .clone()
           .css({display: 'inline', width: 'auto', visibility: 'hidden'})
           .appendTo('body');

if( $c.width() > $element.width() ) {
    // text was truncated. 
    // do what you need to do
}

$c.remove();

jsFiddleを作って実演してみました。 http://jsfiddle.net/cgzW8/2/

jQueryのカスタム擬似セレクタを作成することもできます。

$.expr[':'].truncated = function(obj) {
  var $this = $(obj);
  var $c = $this
             .clone()
             .css({display: 'inline', width: 'auto', visibility: 'hidden'})
             .appendTo('body');

  var c_width = $c.width();
  $c.remove();

  if ( c_width > $this.width() )
    return true;
  else
    return false;
};

次に、それを使って要素を探します。

$truncated_elements = $('.my-selector:truncated');

デモの様子 http://jsfiddle.net/cgzW8/293/

これが役に立つといいのですが、ハチャメチャなものです。