Gemäß dem CSS-Box-Modell-Konzept ist jedes Element auf der Seite eine rechteckige Box. Die Größe, Position und das Verhalten dieser Boxen können alle mit CSS gesteuert werden. Mit Verhalten meine ich, wie es reagiert, wenn sich der Inhalt innerhalb und außerhalb der Box ändert. Wenn Sie beispielsweise die Höhe einer Box nicht festlegen, wird die Höhe der Box nach Bedarf vergrößert, um den Inhalt aufzunehmen. Aber was passiert, wenn Sie eine Höhe oder Breite für eine Box angeben und der Inhalt darin größer ist? Jetzt ist es an der Zeit, die CSS-Überlaufeigenschaft hinzuzufügen, mit der Sie angeben können, wie mit dieser Situation umgegangen werden soll.
Die Überlaufeigenschaft hat vier Werte: sichtbar (Standard), ausgeblendet, scrollen und auto . Es gibt auch zwei Schwestereigenschaften von Overflow, Overflow-y und Overflow-x, die selten verwendet werden.
Schauen wir uns jeden dieser Werte an und besprechen die allgemeine Verwendung und Techniken.
Sichtbar
Wenn Sie das Überlaufattribut nicht festlegen, ist der Standardwert des Überlaufattributs sichtbar. Im Allgemeinen gibt es also keinen Grund, die Überlaufeigenschaft ausdrücklich auf „sichtbar“ zu setzen, es sei denn, Sie möchten den Wert überschreiben, auf den sie an anderer Stelle festgelegt ist.
Dabei ist es wichtig zu bedenken, dass der Inhalt außerhalb des Rahmens zwar sichtbar ist, der Inhalt jedoch keinen Einfluss auf den Workflow der Seite hat. Zum Beispiel:
Im Allgemeinen müssen Sie für Felder, deren Inhalt Text ist, zumindest keine feste Höhe festlegen, sodass diese Situation nicht auftritt.
Versteckt
Der Gegenwert des sichtbaren Standardwerts wird ausgeblendet. Es wird alles außerhalb der Box verbergen.
Dies ist sehr nützlich für den Umgang mit dynamischen Inhalten, die aufgrund eines Inhaltsüberlaufs zu Layoutproblemen führen können. Bitte beachten Sie jedoch, dass mit dieser Methode ausgeblendete Inhalte überhaupt nicht sichtbar sind (es sei denn, Sie sehen sich den Quellcode an). Einige Benutzer stellen beispielsweise die Standardschriftart ihres Browsers so ein, dass sie größer ist als erwartet. Dadurch wird ein Teil des Texts über den Rahmen hinausgeschoben und vollständig ausgeblendet.