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

Odpowiedzi:

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
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