CSS -Überlaufeigenschaft | Erklärt

Während wir Websites entwickeln, stoßen wir häufig auf Situationen, in denen die Inhalte in bestimmten HTML -Elementen vorhanden sind. Sie können auswählen, was mit dem überfüllten Inhalt mit der CSS -Überlaufeigenschaft zu tun ist. Dieser Beitrag soll seine Leser über die Details der Überlaufeigenschaft in CSS aufklären.

Dieses Tutorial umfasst.

1. Überlaufeigenschaft
2. Sichtbarer Wert
3. Versteckter Wert
4. Autowert
5. Überlauf-X und Überlauf-y

Lass uns anfangen.

Überlaufeigenschaft

Die Überlaufeigenschaft steuert das Verhalten des Inhalts, das den angegebenen Bereich eines Elements überläuft. Darüber hinaus ist die Überlaufeigenschaft nur für Elemente auf Blockebene ausgelegt.

Wie andere CSS -Eigenschaften weist die Überlaufeigenschaft auch bestimmte Werte auf, die nachstehend eingehend erklärt werden.

Sichtbarer Wert

Dies ist ein Standardwert der Überlaufeigenschaft. Nehmen wir an, wenn Ihr Inhalt in einer Box platziert ist und überfüllt ist, zeigt dieser Wert den Inhalt an, der den Kastenbereich überschreitet. Darüber hinaus stört der Inhalt, der außerhalb der Kastengrenze angezeigt wird, die Ausrichtung anderer umgebender Elemente nicht.

Hier ist ein Beispiel für diesen Wert.

Html

Während wir Websites entwickeln, stoßen wir häufig auf Situationen, in denen die Inhalte in bestimmten HTML -Elementen vorhanden sind. Sie können auswählen, was mit dem überfüllten Inhalt mit der CSS -Überlaufeigenschaft zu tun ist.

CSS

Ausgang

Weiter zum nächsten Wert.

Versteckter Wert

Der versteckte Wert der Überlaufeigenschaft verbirgt alle Inhalte, die den Kastenbereich überschreiten. Diese Eigenschaft sollte mit Sorgfalt behandelt werden, da die Inhalte, die diese Eigenschaft ausblenden. Unten finden Sie ein Beispiel für den versteckten Wert.

Ausgang

Der Inhalt, der den Boxbereich überschreitet.

Scrollwert

Dieser Wert verbirgt den Inhalt, der den Boxbereich innerhalb des Box überschreitet, und bietet sowohl vertikale als auch horizontale Bildlaufleisten, um den Inhalt anzuzeigen. Hier ist ein Beispiel.

Ausgang

Die Bildlaufleisten wurden hinzugefügt.

Autowert

Dieser Wert hat eine ähnliche Funktion wie der Scrollwert. Was ihn jedoch vom Scroll -Wert unterscheidet. Darüber hinaus fügt es nur den erforderlichen Bildschirmstab hinzu. Hier ist ein Beispiel.

Ausgang

Der Autowert der Überlaufeigenschaft erfolgreich angewendet.

Überlauf-X und Überlauf-y

Dies sind weitere zwei Eigenschaften, die steuern, was mit dem überfüllten Inhalt entweder horizontal oder vertikal passiert. Die Überlauf-X-Eigenschaft steuert das horizontale Verhalten des Inhalts, während die Überlaufeigenschaft das vertikale Verhalten des Inhalts bestimmt. Hier ist ein Beispiel.

Im obigen Beispiel wurde der Überlauf-X-Eigenschaft Scroll-Wert zugewiesen und der Überlauf wird als Ergebnis versteckter Wert zugewiesen. Der Inhalt, der den Boxbereich überschreitet.

Ausgang

Abschluss

Die Überlaufeigenschaft wird verwendet, um das Verhalten des Inhalts zu steuern, der den angegebenen Bereich eines Elements überläuft. Darüber hinaus ist die Überlaufeigenschaft nur für Elemente auf Blockebene ausgelegt. Die Überlaufeigenschaft macht vier Werte, die sind; sichtbar, scrollen, versteckt Und Auto. Es gibt weitere zwei Eigenschaften, die steuern, was mit dem überfüllten Inhalt entweder horizontal oder vertikal geschieht Überlauf-X Und Überlauf-y. In diesem Beitrag werden die Überlaufeigenschaft mit Hilfe geeigneter Beispiele eingehalten.