Когда-то мне нужно было это делать, и единственное надежное решение для разных браузеров, с которым я столкнулся, - это хакерская работа. Я не самый большой поклонник подобных решений, но это, безусловно, дает правильный результат снова и снова.
Идея состоит в том, что вы клонируете элемент, удаляете любую ограничивающую ширину и проверяете, шире ли клонированный элемент, чем оригинал. Если так, то вы знаете, что оно будет усечено.
Например, используя 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/
Надеюсь, это поможет, хакер как это.