Erläuterung der CSS3-Überlaufeigenschaft

1. Überlauf

Überlauf ist Überlauf (Container). Wenn der Inhalt den Container überschreitet, fügen Sie einfach den Überlaufattributwert zu „hidden“ hinzu, um den Teil auszublenden, der den Container überschreitet.

Wenn der Inhalt den Container überschreitet, Sie ihn aber nicht ausblenden möchten, können Sie seinen Eigenschaftswert auf „auto“ setzen.

Überlauf: Automatisches Attribut. Wenn der Wert den Grenzwert überschreitet, wird eine Bildlaufleiste angezeigt. Wenn der Wert den Grenzwert nicht überschreitet, wird keine Bildlaufleiste angezeigt.

Die Scrollleiste lässt sich auch individuell einstellen, zum Beispiel overflow-x:hidden; overflow-y:auto; so dass nur die vertikale Scrollleiste sichtbar ist. Wenn Sie die x-Achse oder die y-Achse separat definieren, müssen Sie die Attributwerte für beide Attribute festlegen.

Ursprünglicher Effekt:

Überlauf hinzufügen: versteckt; Attribut, Effekt:

Wie Sie sehen, verbirgt overflow:hidden den Teil, der über die Box hinausgeht, was auch als Abschneiden verstanden werden kann.

2. Fügen Sie die Eigenschaften overflow-x: hidden; overflow-y: auto hinzu

Die Eigenschaften sind auf overflow-x: auto; overflow-y: hidden eingestellt; der Effekt ist genau das Gegenteil des obigen Bildes, d. h. die Seite der Bildlaufleiste wird ausgeblendet und unten angezeigt.

2. Gemeinsame Attributwerte des Überlaufs

Es gibt vier allgemeine Überlaufattribute: sichtbar, ausgeblendet, automatisch und scrollen.

Sichtbar ist der Standardwert des Überlaufs, was bedeutet, dass er die Anzeige überschreitet.

Versteckt bedeutet mehr als verborgen;

„auto“ bedeutet automatisch, d. h., wenn der Wert den Grenzwert überschreitet, wird eine Bildlaufleiste angezeigt, und wenn der Wert den Grenzwert nicht überschreitet, wird keine Bildlaufleiste angezeigt.

Wenn ein Bildlauf aktiviert ist, wird der Inhalt abgeschnitten, der Browser zeigt jedoch eine Bildlaufleiste an, um den verbleibenden Inhalt anzuzeigen.

3. Magische Verwendung von Überlauf

Die erste Anwendung: Lösen Sie das Problem der Randübertragung

Problem der Übertragung des oberen Rands: Der obere Rand des untergeordneten Elements zieht das übergeordnete Element zusammen nach unten. Dies kann gelöst werden, indem dem übergeordneten Element overflow:hidden hinzugefügt wird.

Die zweite Verwendung: Beseitigen Sie die Auswirkungen des Schwebens - reduzieren Sie die Höhe des übergeordneten Elements

Universelle Reinigungsmethode

Überlauf: versteckt

klar: beide

Die dritte Verwendung: Animation enthüllen --- mehr als nur verbergen

Vierte Verwendung: Einzeiliger Text überschreitet Auslassungspunkte

.sl{

    white-space:nowrap;/*kein Zeilenumbruch*/

    overflow:hidden;/*Überschreitet versteckt*/
    
    text-overflow:ellipsis;/*überschreitet die Auslassungspunkte*/

    Breite:;

}

Beachten Sie, dass Sie die Breite einstellen müssen

Oben finden Sie eine ausführliche Erläuterung der CSS3: overflow-Eigenschaft. Weitere Informationen zur CSS3-Overflow-Eigenschaft finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!