Dieser Artikel zeigt:
Wie verwende ich „overflow-hidden“ in Tailwind?
Der 'Überlauf versteckt' Die Klasse verbirgt oder schneidet den Inhalt aus, der die Größe dieses Elements überschreitet. Um „overflow-hidden“ in Tailwind zu nutzen, erstellen Sie ein HTML-Programm und wenden Sie die Dienstprogrammklasse „overflow-hidden“ mit dem spezifischen Element an.
Syntax
Beispiel
In diesem Beispiel wenden wir an 'Überlauf versteckt' Dienstprogramm für den
< Körper >
< div Klasse = „overflow-hidden bg-purple-300 p-4 mx-16 mt-5 h-32 text-justify“ >
Tailwind CSS bietet verschiedene 'Überlauf' Versorgungsunternehmen, wie z „overflow-auto“ , „Überlauf-Scroll“ , 'Überlauf versteckt' ,
„Überlauf sichtbar“ usw. Diese Dienstprogramme bestimmen, wie ein bestimmtes Element mit dem umgeht Inhalt das übersteigt die
Container Größe . Jedes Dienstprogramm bietet einzigartige Funktionen, ihr Endziel bleibt jedoch das gleiche, nämlich die Kontrolle
das Überlaufverhalten der ausgewählt Element.
< / div >
< / Körper >
Hier:
- 'Überlauf versteckt' Die Klasse wird verwendet, um den Inhalt auszublenden, der die Größe des -Containers überschreitet.
- „bg-purple-300“ Die Klasse legt die violette Farbe für den Hintergrund des Containers fest.
- „p-4“ Die Klasse legt 4 Polstereinheiten auf allen Seiten des Containers fest.
- „mx-16“ Die Klasse wendet die 16 Margin-Einheiten auf der x-Achse des Containers an.
- „mt-5“ Die Klasse wendet die 5 Einheiten Rand auf die Oberseite des Containers an.
- „h-32“ Die Klasse legt die Höhe des Containers auf 32 Einheiten fest.
- „Text-Rechtfertigung“ Die Klasse richtet den Text des Inhalts im Container aus.
Ausgabe
In der obigen Ausgabe ist der überlaufende Inhalt nicht zu sehen, was darauf hinweist, dass die Eigenschaft „overflow-hidden“ erfolgreich angewendet wurde.
Wie verwende ich „overflow-visible“ in Tailwind?
Der „Überlauf-sichtbar“ Klasse ermöglicht es, den darüber hinausgehenden Inhalt sichtbar zu machen. Um „overflow-visible“ in Tailwind zu nutzen, erstellen Sie eine HTML-Struktur und wenden Sie die Dienstprogrammklasse „overflow-visible“ mit dem jeweiligen Element an.
Syntax
Beispiel
In diesem Beispiel wenden wir an „Überlauf-sichtbar“ Dienstprogramm zum-Container hinzufügen, um den Überlaufinhalt anzuzeigen: < Körper >
< div Klasse = „overflow-visible bg-purple-300 p-4 mx-16 mt-5 h-32 text-justify“ >
Tailwind CSS bietet verschiedene 'Überlauf' Versorgungsunternehmen, wie z „overflow-auto“ , „Überlauf-Scroll“ , 'Überlauf versteckt' ,
„Überlauf sichtbar“ usw. Diese Dienstprogramme bestimmen, wie ein bestimmtes Element mit dem umgeht Inhalt das übersteigt die
Container Größe . Jedes Dienstprogramm bietet einzigartige Funktionen, ihr Endziel bleibt jedoch das gleiche, nämlich die Kontrolle
das Überlaufverhalten der ausgewählt Element.
< / div >
< / Körper >Hier, im obigen Codeausschnitt, der „Überlauf-sichtbar“ Die Klasse wird verwendet, um den Inhalt anzuzeigen, der die Größe des Containers überschreitet.
Ausgabe
Gemäß der obigen Ausgabe wurde das Dienstprogramm „overflow-visible“ erfolgreich angewendet.
Abschluss
Um „overflow-hidden“ und „overflow-visible“ in Tailwind zu verwenden, fügen Sie Folgendes hinzu: 'Überlauf versteckt' Und „Überlauf-sichtbar“ Utility-Klassen mit den gewünschten Elementen im HTML-Programm. Das Dienstprogramm „overflow-hidden“ verbirgt den überlaufenden Inhalt, während „overflow-visible“ den überlaufenden Inhalt des angegebenen Elements anzeigt. In diesem Artikel wurde die Methode zur Verwendung der Dienstprogramme „Overflow-hidden“ und „Overflow-Visible“ in Tailwind veranschaulicht.