Определите, переполняется ли содержимое HTML-элемента

136

Могу ли я использовать JavaScript, чтобы проверить (независимо от полос прокрутки), переполнен ли HTML-элемент его содержимым? Например, длинный div с небольшим фиксированным размером, свойство overflow, установленное на visible, и отсутствие полос прокрутки на элементе.

javascript html css Barett
источник

Ответы:

217

Обычно вы можете сравнить 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.

Shog9
источник
спасибо, Shog9 ... мне кажется, что мне нужна была процедура обнаружения, потому что я играю с переполнением (скрытым / видимым)
У меня похожий вопрос на stackoverflow.com/questions/2023787/… где я пытаюсь выяснить, какие части содержащего элемента имеют скрытое переполнение.
slolife
2
Интересно, даст ли это короткое мерцание, когда стиль ненадолго изменился?
Стейн де Витт
3
+1. Это работает в современных браузерах (включая, по крайней мере, Chrome 40 и другие браузеры текущей версии с момента написания этой статьи).
L0j1k
1
Не работает в MS Edge. Иногда содержание не переполнены , но clientWidthи scrollWidthотличается от 1px.
Джеспер
2

Я не думаю, что этот ответ идеален. Иногда scrollWidth / clientWidth / offsetWidth совпадают, даже если текст переполнен.

Это хорошо работает в Chrome, но не в IE и Firefox.

Наконец, я попробовал этот ответ: Обнаружение многоточия переполнения текста HTML

Это прекрасно и хорошо работает где угодно. Поэтому я выбираю это, может быть, вы можете попробовать, вы не разочаруетесь.

zjalex
источник
Я предлагаю удалить или отменить голос, так как в нем есть какой-то дефект. Сначала я использую это, но оно не может работать идеально с каким-то особым стилем CSS.
zjalex
1

Другой способ - сравнить ширину элемента с шириной его родителя:

function checkOverflow(elem) {
    const elemWidth = elem.getBoundingClientRect().width
    const parentWidth = elem.parentElement.getBoundingClientRect().width

    return elemWidth > parentWidth
}
Алиссон Нуньес
источник
0

С помощью jQuery вы можете сделать:

if ( $(".inner-element").prop('scrollHeight') > $(".inner-element").height() ) {

    console.log("element is overflowing");

} else {

    console.log("element is not overflowing");

}

Измените на .prop('scrollWidth')и .width()при необходимости.

Агу Дондо
источник
-2

Это решение 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.

user945389
источник