Я пытаюсь обнаружить (через javascript), когда текстовое переполнение действует. После долгих исследований у меня есть рабочее решение, за исключением любой версии Firefox:
http://jsfiddle.net/tonydew/mjnvk/
Если вы настроите браузер так, чтобы применялось многоточие, Chrome, Safari и даже IE8 + будут предупреждать, что многоточие активно. В Firefox (каждая версия я пробовал, в том числе 17 и 18) не так много. Firefox всегда будет говорить, что эллипс НЕ активен.
Результат console.log() показывает, почему:
Firefox (OS X):
116/115 - false
347/346 - false
Chrome (OS X):
116/115 - false
347/851 - true
В Firefox scrollWidth никогда не превышает offsetWidth.
Ближайшая вещь, которую я могу найти для решения, - "Почему IE и Firefox возвращают разные размеры переполнения для div?", но я уже использую предлагаемое решение.
Может кто-нибудь пролить свет на то, как сделать эту работу в Firefox тоже, пожалуйста?
<ч/" > EDIT: В дополнение к @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 при каждой загрузке страницы.