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

Question

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

Answer 1

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

Answer 2

Попробуйте сравнить 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

Answer 3

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

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

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

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

Answer 4

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

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

    console.log("element is overflowing");

} else {

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

}

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

Answer 5

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