Визначте, чи переповнюється вміст HTML-елемента

136

Чи можу я використовувати JavaScript для перевірки (незалежно від смуг прокрутки), чи HTML елемент переповнював його вміст? Наприклад, довгий div з невеликим, фіксованим розміром, властивістю переповнення, встановленим на видиме, і відсутні панелі прокрутки на елементі.

javascript html css

— Баретт
джерело

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.

— джеспер

11

Спробуйте порівняти 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/uk/DOM/element. scrollWidth
http://developer.mozilla.org/en/DOM/element.scrollHeight

— Кріс Макдональд
джерело

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
джерело