Определите, не переполняется ли содержимое HTML-элемента
Могу ли я использовать JavaScript для проверки (независимо от полос прокрутки), не переполнился ли элемент HTML своим содержимым? Например, длинный div с маленьким фиксированным размером, для свойства переполнения установлено значение visible и без полос прокрутки на элементе.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 6
Попробуйте сравнить element.scrollHeight / element.scrollWidth с element.offsetHeight / element.offsetWidth
http://developer.mozilla.org/en/DOM/element.offsetWidth
http://developer.mozilla.org/en/DOM/element.offsetHeight
http://developer.mozilla.org/en/DOM/element.scrollWidth
http://developer.mozilla.org/en/DOM/element.scrollHeight
Обычно вы можете сравнить client[Height|Width] с scroll[Height|Width], чтобы обнаружить это ... но значения будут такими же, когда видно переполнение. Итак, процедура обнаружения должна учитывать это:
// Determines if the passed element is overflowing its bounds,
// either vertically or horizontally.
// Will temporarily modify the "overflow" style to detect this
// if necessary.
function checkOverflow(el)
{
var curOverflow = el.style.overflow;
if ( !curOverflow || curOverflow === "visible" )
el.style.overflow = "hidden";
var isOverflowing = el.clientWidth < el.scrollWidth
|| el.clientHeight < el.scrollHeight;
el.style.overflow = curOverflow;
return isOverflowing;
}
Проверено в FF3, FF40.0.2, IE6, Chrome 0.2.149.30.
У меня есть аналогичный вопрос в stackoverflow.com/questions/2023787/…, где я пытаюсь выяснить, какие части содержащего элемента имеют скрытое переполнение.
Интересно, даст ли это кратковременное мерцание при кратковременном изменении стиля?
+1. Это работает в современных браузерах (включая как минимум Chrome 40 и другие браузеры текущей версии на момент написания этой статьи).
Не работает в MS Edge. Иногда содержимое не переполняется, но clientWidth и scrollWidth отличаются на 1 пиксель.
clientWidth и scrollWidth показывают ноль для элементов, загруженных с помощью jquery div.load $ ('# div1'). load (myUrl, function () {var el = $ ('myElement'); checkOverflow (el)});
Составьте тестовый пример и задайте новый вопрос по этому поводу, @ Gk_999
Будет ли это работать для многострочного многоточия, которое достигается с помощью -webkit-line-clamp? css-tricks.com/line-clampin
@ Shog9 - Извините, я хотел сказать, что он не работает для многострочного многоточия, которое достигается с помощью -webkit-line-clamp. Я просто сравниваю offsetWidth и clientWidth, и значения одинаковы для обоих независимо от того, отображается ли многоточие. Интересно, выполнили ли вы или кто-то другой эту работу для многострочного многострочного текста.
Понятно, @AshD. Вам наверное придется динамически отбрасывать и повторно добавлять стиль -webkit-line-clamp, как я это делаю для стиля overflow в этом примере. Может получиться немного запутаться, если нет разумного значения по умолчанию; задайте новый вопрос, если у вас возникнут проблемы.
Работает, но без добавления переполнения: скрыто
Я не думаю, что этот ответ идеален. Иногда scrollWidth / clientWidth / offsetWidth совпадают, даже если текст переполнен.
Это хорошо работает в Chrome, но не в IE и Firefox.
Наконец-то я попробовал такой ответ: Обнаружение многоточия при переполнении текста HTML
Он идеален и хорошо работает где угодно. Так что я выбираю это, может, вы можете попробовать, вы не разочаруете.
Предлагаю удалить этот ответ или отменить голосование, так как в нем есть какой-то дефект. Сначала я использую это, но он не может работать идеально с каким-то особым стилем css.
Это решение javascript (с Mootools), которое уменьшит размер шрифта, чтобы он соответствовал границам elHeader.
while (elHeader.clientWidth < elHeader.scrollWidth || elHeader.clientHeight < elHeader.scrollHeight) {
var f = parseInt(elHeader.getStyle('font-size'), 10);
f--;
elHeader.setStyle('font-size', f + 'px');
}
CSS elHeader:
width:100%;
font-size:40px;
line-height:36px;
font-family:Arial;
text-align:center;
max-height:36px;
overflow:hidden;
Обратите внимание, что оболочка elHeader устанавливает ширину elHeader.
С помощью jQuery вы могли:
if ( $(".inner-element").prop('scrollHeight') > $(".inner-element").height() ) {
console.info("element is overflowing");
} else {
console.info("element is not overflowing");
}
При необходимости измените на .prop('scrollWidth') и .width().
Другой способ - сравнить ширину элемента с шириной его родительского элемента:
function checkOverflow(elem) {
const elemWidth = elem.getBoundingClientRect().width
const parentWidth = elem.parentElement.getBoundingClientRect().width
return elemWidth > parentWidth
}
спасибо Shog9 ... процедура обнаружения, я думаю, то, что мне нужно, потому что я играю с переполнением (скрытым / видимым)