むかしむかし、これを行う必要があり、ブラウザ間で信頼できる唯一の解決策はハックジョブでした。私はこのようなソリューションの最大のファンではありませんが、確かに何度も正しい結果を生み出します。
アイデアは、要素を複製し、境界幅を削除し、複製した要素が元の要素よりも広いかどうかをテストすることです。もしそうなら、あなたはそれが切り捨てられるだろうことを知っています。
たとえば、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/
うまくいけば、これは、ハックがそのままであることを助けます。