Überlaufen in HTML5

Sobald wir uns auf den Weg gemacht haben, Änderungen an den Größen der Elemente und ihrer Container vorzunehmen, kommt immer der Zeitpunkt, an dem die beiden nicht mehr kompatibel sind und wir den schrecklichen Effekt bekommen, dass Überlauf oder Überlauf, der nichts anderes ist als der Effekt, dass ein Element größer als ein anderes ist und aus seinem Behälter fällt.
Sehen wir uns ein klassisches Beispiel für ein Element an, das für seinen Inhalt sehr klein ist und einen Überlauf erzeugt, da alles durch Beispiele leichter zu durchschauen ist. Sehen wir uns zuerst eines an, bevor wir uns die Eigenschaften ansehen, die uns helfen, den Überlauf zu kontrollieren.

 Beispiel
Es gibt viele verschiedene Obstsorten – allein von Bananen gibt es über 500 Sorten. Wenn wir die unzähligen Apfel-, Orangen- und anderen bekannten Obstsorten hinzufügen, stehen wir vor Tausenden von Möglichkeiten.

Der vorherige Code erzeugt im Browser folgendes Ergebnis:

Wie wir den Text über die Übergabe der Kapazität der Containerbox sehen können, können wir dies mit der Eigenschaft . korrigieren Überlauf, schauen wir uns die Eigenschaften an, bevor wir mit der Korrektur dieses Problems fortfahren:

Überlauf-x / Überlauf-y: Sie bestimmen das Verhalten des horizontalen oder vertikalen Überlaufs.

Überlauf: Es ist eine Abkürzung, um die vorherige Eigenschaft zu verwenden, und die Reihenfolge, in der sie funktioniert, ist Überlauf, Überlauf x, Überlauf y.

Die Eigenschaften, die mit dem Element verwendet werden können Überlauf sind wie folgt:

Wagen: Dieser Wert delegiert an den Browser die Verantwortung zu entscheiden, was zu tun ist. Normalerweise wird eine Bildlaufleiste angezeigt, wenn das Element zu überlaufen beginnt, das sie enthält.

versteckt: Der Inhalt wird bis zu dem Teil angezeigt, der nicht überläuft, wobei der Rest des Inhalts ausgeblendet wird. Es gibt keine Mechanismen, die dem Benutzer sagen, was er tun soll, um den Rest des Inhalts anzuzeigen.

kein Inhalt: Übergelaufener Inhalt wird entfernt, wenn er nicht im Container untergebracht werden kann. Dieser Wert wird von keinem der gängigsten Browser unterstützt

kein Bildschirm: Inhalte werden ausgeblendet, wenn sie nicht vollständig angezeigt werden können. Dieser Wert wird von keinem der gängigsten Browser unterstützt.

scrollen: Der Browser generiert eine Bildlaufleiste, die es dem Benutzer ermöglicht, den übergelaufenen Inhalt im Container immer zu sehen. Die Leiste hängt vom Browser und vom System ab, um die Art und Weise zu definieren, wie sie angezeigt wird. Die Bildlaufleiste ist immer sichtbar, auch wenn das Element nicht überläuft.

sichtbar: Dies ist der Standardwert. Der Inhalt wird immer angezeigt, auch wenn er überläuft.

Da wir nun über die Werkzeuge verfügen, um einen Überlauf anzugreifen, sehen wir uns in der Praxis an, wie wir ihn anwenden können, nichts Besseres als ein kleiner Code, um es zu demonstrieren:

 Beispiel
Es gibt viele verschiedene Obstsorten – allein von Bananen gibt es über 500 Sorten. Wenn wir die unzähligen Apfel-, Orangen- und anderen bekannten Obstsorten hinzufügen, stehen wir vor Tausenden von Möglichkeiten.
Es gibt viele verschiedene Obstsorten – allein von Bananen gibt es über 500 Sorten. Wenn wir die unzähligen Apfel-, Orangen- und anderen bekannten Obstsorten hinzufügen, stehen wir vor Tausenden von Möglichkeiten.

Wir haben zwei Elemente verwendet, um zu demonstrieren, wie die Überlauf, im ersten platzieren wir die Eigenschaft versteckt wo wir wissen, dass nur der Inhalt bis zum Beginn des Überlaufs angezeigt wird, der Rest wird ausgeblendet und für die Sekunde verwenden wir scroll, mit dem ein Scrollbalken angezeigt wird, egal ob das Element überläuft oder nicht, sehen wir uns das Ergebnis an:

Hat dir dieses Tutorial gefallen und geholfen?Sie können den Autor belohnen, indem Sie diesen Knopf drücken, um ihm einen positiven Punkt zu geben