Wie kann ich einen HTML-Inhaltsüberlauf ohne Bildlaufleisten erkennen?

Erkennen von Inhaltsüberläufen in HTML-Elementen ohne Bildlaufleisten

Viele Entwickler stehen vor der Herausforderung, festzustellen, wann der Inhalt eines HTML-Elements über seine sichtbaren Grenzen hinausgeht. insbesondere wenn keine Bildlaufleisten vorhanden sind. Diese Aufgabe wird komplexer, wenn die Überlaufeigenschaft des Elements auf „sichtbar“ gesetzt ist.

Lösung

Die Lösung liegt im Vergleich der Client-Abmessungen des Elements ([Höhe|Breite). ]) mit seinen Scroll-Abmessungen ([Höhe|Breite]). Wenn jedoch ein Überlauf sichtbar ist, sind diese Werte gleich. Um dies zu berücksichtigen, können wir den Überlaufstil vorübergehend auf „versteckt“ ändern, nach Überlaufbedingungen suchen und dann den ursprünglichen Überlaufwert wiederherstellen.

Implementierung

Die Das folgende Code-Snippet stellt eine JavaScript-Funktion, checkOverflow(), bereit, die dies ausführt Erkennung:

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

Verwendung

Rufen Sie die Funktion checkOverflow() für das Zielelement auf, um festzustellen, ob es übergelaufenen Inhalt hat. Die Funktion gibt einen booleschen Wert zurück, der angibt, ob ein Überlauf vorliegt oder nicht.

Testen

Diese Routine wurde erfolgreich in Firefox 3, Firefox 40.0.2 und Internet Explorer getestet 6 und Chrome 0.2.149.30.

Das obige ist der detaillierte Inhalt vonWie kann ich einen HTML-Inhaltsüberlauf ohne Bildlaufleisten erkennen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!