Erstellen eines Elements, das überläuft
Sehen wir uns ein klassisches Beispiel für ein Element an, das für seinen Inhalt zu klein ist und einen Überlauf erzeugt, da anhand von Beispielen alles leichter zu erkennen ist. Schauen wir uns zunächst eines an, bevor wir uns den Eigenschaften zuwenden, mit denen wir den Überlauf steuern können.
<! DOCTYPE HTML> <html> <head> <title> Beispiel </ title> <style type = "text / css"> p { Breite: 200px; Höhe: 100px; Rand: mittelschwarz doppelt; } </ style> </ head> <body> <p> Es gibt viele verschiedene Obstsorten - es gibt über 500 Sorten von Banane allein. Bis wir die unzähligen Arten von Äpfeln, Orangen, und anderen bekannten Früchten stehen wir vor Tausenden von Möglichkeiten. </ p> </ body> </ html>
Der vorherige Code generiert das folgende Ergebnis im Browser:
Da wir den Text über die Kapazität der Container-Box sehen können, können wir die Überlaufeigenschaft verwenden , um dies zu korrigieren. Sehen wir uns die Eigenschaften an, bevor wir mit der Korrektur dieses Problems fortfahren:
Überlauf-x / Überlauf-y: Bestimmt 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 wirkt, ist Überlauf, Überlauf x, Überlauf und.
Folgende Eigenschaften können mit dem Überlaufelement verwendet werden:
auto: Mit diesem Wert wird der Browser beauftragt, zu entscheiden, was zu tun ist. In der Regel wird eine Bildlaufleiste angezeigt, wenn das Element, das das Element enthält, überläuft.
versteckt: Der Inhalt wird bis zu dem Teil angezeigt, der den Rest des Inhalts nicht überläuft. Es gibt keine Mechanismen, die dem Benutzer mitteilen, was zu tun ist, um den Rest des Inhalts anzuzeigen.
no-content: Übergelaufener Inhalt wird entfernt, wenn er nicht im Container untergebracht werden kann. Dieser Wert wird von keinem der beliebtesten Browser unterstützt
Keine Anzeige: Der Inhalt wird ausgeblendet, wenn er nicht vollständig angezeigt werden kann. Dieser Wert wird von keinem der beliebtesten Browser unterstützt.
scroll: Der Browser generiert eine Bildlaufleiste, mit der der Benutzer immer den Inhalt im Container sehen kann, der übergelaufen ist. Die Leiste hängt vom Browser und vom System ab, um die Art und Weise der Anzeige zu definieren. Die Bildlaufleiste ist immer sichtbar, auch wenn das Element nicht überläuft.
visible: Dies ist der Standardwert. Der Inhalt wird immer angezeigt, auch wenn er überläuft.
Nachdem wir nun die Werkzeuge zum Angreifen eines Überlaufs haben, wollen wir in der Praxis sehen, wie wir ihn anwenden können. Nichts ist besser als ein bisschen Code, um dies zu beweisen:
<! DOCTYPE HTML> <html> <head> <title> Beispiel </ title> <style type = "text / css"> p { Breite: 200px; Höhe: 100px; Rand: mittelschwarz doppelt; } #first {overflow: hidden;} #second {overflow: scroll;} </ style> </ head> <body> <p id = "first"> Es gibt viele verschiedene Obstsorten - es gibt über 500 Sorten von Banane allein. Bis wir die unzähligen Arten von Äpfeln, Orangen, und anderen bekannten Früchten stehen wir vor Tausenden von Möglichkeiten. </ p> <p id = "second"> Es gibt viele verschiedene Obstsorten - es gibt über 500 Sorten von Banane allein. Bis wir die unzähligen Arten von Äpfeln, Orangen, und anderen bekannten Früchten stehen wir vor Tausenden von Möglichkeiten. </ p> </ body> </ html>
Wir haben zwei Elemente verwendet, um die Funktionsweise des Überlaufs zu demonstrieren. In der ersten setzen wir die Eigenschaft hidden an die Stelle, an der wir wissen, dass nur der Inhalt angezeigt wird, bis der Überlauf beginnt. Dann wird der Rest ausgeblendet. In der zweiten verwenden wir scroll, mit der ein Balken angezeigt wird Wenn das Element überläuft oder nicht, sehen wir uns das Ergebnis an:
