Sprawdź, czy zawartość elementu HTML przepełnia się

136

Czy mogę użyć JavaScript do sprawdzenia (niezależnie od pasków przewijania), czy element HTML przepełnił swoją zawartość? Na przykład długi element div o małym, stałym rozmiarze, właściwość przepełnienia ustawiona na visible i brak pasków przewijania w elemencie.

javascript html css

— Barett
źródło

217

Zwykle można to porównać client[Height|Width]z scroll[Height|Width], aby to wykryć ... ale wartości będą takie same, gdy widoczne jest przepełnienie. Tak więc procedura wykrywania musi uwzględniać to:

// 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;
}

Przetestowano w FF3, FF40.0.2, IE6, Chrome 0.2.149.30.

— Shog9
źródło

dziękuję Shog9 ... myślę, że procedura wykrywania jest tym, czego potrzebowałem, ponieważ gram z przepełnieniem (ukryty / widoczny)

Mam podobne pytanie na stackoverflow.com/questions/2023787/ ... gdzie próbuję dowiedzieć się, które części elementu zawierającego mają ukryte przepełnienie.

— slolife

2

Zastanawiam się, czy da to krótkie migotanie, ponieważ styl jest na krótko zmieniany?

— Stijn de Witt

3

+1. Działa to na nowoczesnych przeglądarkach (w tym co najmniej Chrome 40 i innych przeglądarkach w aktualnej wersji z czasu pisania tego tekstu).

— L0j1k

1

Nie działa w MS Edge. Czasami zawartość nie jest przepełnione, ale clientWidthi scrollWidthróżni się o 1px.

— jesper

11

Spróbuj porównać element.scrollHeight/ element.scrollWidthdo 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

— Chris MacDonald
źródło

2

Nie sądzę, aby ta odpowiedź była doskonała. Czasami scrollWidth / clientWidth / offsetWidth są takie same, mimo że tekst jest przepełniony.

Działa to dobrze w Chrome, ale nie w IE i Firefox.

W końcu wypróbowałem tę odpowiedź: wykrywanie przepełnienia tekstu w HTML

Jest doskonały i działa dobrze wszędzie. Więc wybieram to, może możesz spróbować, nie zawiedziesz.

— zjalex
źródło

Proponuję usunąć lub cofnąć głosowanie tej odpowiedzi, ponieważ ma jakąś wadę. Używam tego na początku, ale nie może działać idealnie z jakimś specjalnym stylem CSS.

— zjalex

1

Innym sposobem jest porównanie szerokości elementu z szerokością jego rodzica:

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

    return elemWidth > parentWidth
}

— Alisson Nunes
źródło

0

Dzięki jQuery możesz:

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

    console.log("element is overflowing");

} else {

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

}

Zmień na .prop('scrollWidth')iw .width()razie potrzeby.

— Agu Dondo
źródło

-2

Jest to rozwiązanie javascript (z Mootools), które zmniejszy rozmiar czcionki, aby dopasować ją do granic 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;

Zwróć uwagę, że opakowanie elHeader ustawia szerokość elHeader.

— user945389
źródło