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

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

ОТВЕТЫ

Ответ 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.

Ответ 3

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

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

Наконец, я попробовал этот ответ: Эллипсис HTML-переполнения

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

Ответ 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() при необходимости.

Ответ 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.