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

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

11

Versuchen Sie, element.scrollHeight/ element.scrollWidthmit element.offsetHeight/ zu vergleichenelement.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
quelle

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