Stellen Sie fest, ob der Inhalt eines HTML-Elements überläuft

136

Kann ich mit JavaScript überprüfen (unabhängig von Bildlaufleisten), ob ein HTML-Element seinen Inhalt übergelaufen ist? Beispiel: Ein langes Div mit einer kleinen festen Größe, der sichtbaren Überlaufeigenschaft und keinen Bildlaufleisten für das Element.

javascript html css Barett
quelle

Antworten:

217

Normalerweise können Sie die client[Height|Width]mit vergleichen scroll[Height|Width], um dies zu erkennen ... aber die Werte sind dieselben, wenn ein Überlauf sichtbar ist. Eine Erkennungsroutine muss dies berücksichtigen:

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

Getestet in FF3, FF40.0.2, IE6, Chrome 0.2.149.30.

Shog9
quelle
danke Shog9 ... die Erkennungsroutine ist, denke ich, was ich brauchte, weil ich mit Überlauf (versteckt / sichtbar)
Ich habe eine ähnliche Frage unter stackoverflow.com/questions/2023787/…, wo ich versuche herauszufinden, welche Teile des enthaltenen Elements einen versteckten Überlauf haben.
Slolife
2
Ich frage mich, ob dies ein kurzes Flackern hervorruft, wenn der Stil kurz geändert wird.
Stijn de Witt
3
+1. Dies funktioniert in modernen Browsern (einschließlich mindestens Chrome 40 und anderen Browsern der aktuellen Version aus der Zeit dieses Schreibens).
L0j1k
1
Funktioniert nicht in MS Edge. Manchmal ist Inhalt nicht aber überfüllt clientWidthund scrollWidthvon 1px unterscheidet.
Jesper
2

Ich denke nicht, dass diese Antwort perfekt ist. Manchmal sind die scrollWidth / clientWidth / offsetWidth gleich, obwohl der Text überläuft.

Dies funktioniert gut in Chrome, aber nicht in IE und Firefox.

Zuletzt habe ich diese Antwort ausprobiert: Erkennung von HTML-Textüberlauf-Auslassungspunkten

Es ist perfekt und funktioniert überall gut. Also wähle ich das, vielleicht kannst du es versuchen, du wirst nicht enttäuschen.

zjalex
quelle
Ich schlage vor, diese Antwort zu entfernen oder abzuwählen, da sie einen Defekt aufweist. Ich benutze dies zuerst, aber es kann nicht perfekt mit einem speziellen CSS-Stil funktionieren.
Zjalex
1

Eine andere Möglichkeit besteht darin, die Elementbreite mit der Breite des übergeordneten Elements zu vergleichen:

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

    return elemWidth > parentWidth
}
Alisson Nunes
quelle
0

Mit jQuery können Sie Folgendes tun:

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

    console.log("element is overflowing");

} else {

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

}

Wechseln Sie zu .prop('scrollWidth')und .width()bei Bedarf.

Agu Dondo
quelle
-2

Dies ist eine Javascript-Lösung (mit Mootools), die die Schriftgröße reduziert, um sie an die Grenzen von elHeader anzupassen. 

while (elHeader.clientWidth < elHeader.scrollWidth || elHeader.clientHeight < elHeader.scrollHeight) {
  var f = parseInt(elHeader.getStyle('font-size'), 10);
  f--;
  elHeader.setStyle('font-size', f + 'px');
}

Das CSS von elHeader:

    width:100%;
    font-size:40px;
    line-height:36px;
    font-family:Arial;
    text-align:center;
    max-height:36px;
    overflow:hidden;

Beachten Sie, dass der Wrapper von elHeader die Breite von elHeader festlegt.

user945389
quelle