Wie verwende ich „overflow-auto“ und „overflow-scroll“ in Tailwind?

Tailwind CSS bietet verschiedene „Überlauf”-Dienstprogramme wie „overflow-auto“, „overflow-scroll“, „overflow-hidden“, „overflow-visible“ usw. Diese Dienstprogramme bestimmen, wie ein bestimmtes Element mit Inhalten umgeht, die die Containergröße überschreiten. Jedes Dienstprogramm bietet einzigartige Funktionen; ihr Endziel bleibt jedoch dasselbe, nämlich das Überlaufverhalten des ausgewählten Elements zu steuern.

Dieser Artikel veranschaulicht:

Wie verwende ich „overflow-auto“ in Tailwind?

Der „Überlauf-AutoDie Klasse „overflow-auto“ fügt automatisch Bildlaufleisten hinzu, wenn der Inhalt überläuft. Die Bildlaufleiste wird nicht angezeigt, wenn der Inhalt nicht überläuft. Um „overflow-auto“ in Tailwind zu verwenden, erstellen Sie ein HTML-Programm und fügen Sie die „Überlauf-Auto“-Hilfsklasse zum gewünschten Element im HTML-Programm.

Syntax

Beispiel

In diesem Beispiel wenden wir die „Überlauf-Auto“ Nutzen für die

Behälter: <Körper>

<div Klasse = „Überlauf-Auto bg-purple-300 p-4 mx-16 mt-5 h-32 Text-Justierung“ >

Tailwind CSS bietet verschiedene „Overflow“-Dienstprogramme, wie „overflow-auto“, „overflow-scroll“, „overflow-hidden“, „overflow-visible“ usw. Diese Dienstprogramme bestimmen, wie ein bestimmtes Element mit Inhalten umgeht, die die Containergröße überschreiten. Jedes Dienstprogramm bietet einzigartige Funktionen, ihr Endziel bleibt jedoch dasselbe, nämlich das Überlaufverhalten des ausgewählten Elements zu steuern.

div>

Körper>

  • „Überlauf-Auto“ Die Klasse wird verwendet, um die Bildlaufleisten zum Container hinzuzufügen und sie nur anzuzeigen, wenn ein Bildlauf erforderlich ist.
  • „bg-lila-300“ Die Klasse legt die violette Farbe als Hintergrundfarbe des Containers fest.
  • „p-4“ Die Klasse legt 4 Polstereinheiten auf allen Seiten des Containers fest.
  • „mx-16“ Die Klasse wendet die 16 Einheiten des Rands auf der X-Achse des Containers an.
  • „mt-5“ Die Klasse wendet die 5 Randeinheiten auf die Oberseite des Containers an.
  • „h-32“ Klasse setzt die Höhe des Containers auf 32 Einheiten.
  • „Text ausrichten“ Klasse richtet den Text des Inhalts innerhalb des Containers aus.
  • Ausgabe

    Die obige Ausgabe zeigt eine vertikale Bildlaufleiste, wenn der Text überläuft. Dies zeigt an, dass die „Überlauf-Auto“ Das Dienstprogramm wurde erfolgreich auf das Element angewendet.

    Wie verwende ich „Overflow-Scroll“ in Tailwind?

    Dieses Dienstprogramm fügt die Bildlaufleisten zum Container hinzu und zeigt sie immer an, auch wenn das Scrollen nicht erforderlich ist. Es ermöglicht auch das Scrollen in alle Richtungen. Um den „Overflow-Scroll“ in Tailwind zu verwenden, erstellen Sie ein HTML-Programm und fügen Sie den „Überlauf-Scrollen“ Hilfsklasse für das jeweilige Element im HTML-Programm.

    Syntax

    Beispiel

    In diesem Beispiel wenden wir die „Überlauf-Scrollen“ Nutzen für die

    Behälter: <Körper>

    <div Klasse = „Überlauf-Scroll bg-purple-300 p-4 mx-16 mt-5 h-32 Textausrichtung“>

    Tailwind CSS bietet verschiedene „Overflow“-Dienstprogramme, wie „overflow-auto“, „overflow-scroll“, „overflow-hidden“, „overflow-visible“ usw. Diese Dienstprogramme bestimmen, wie ein bestimmtes Element mit Inhalten umgeht, die die Containergröße überschreiten. Jedes Dienstprogramm bietet einzigartige Funktionen, ihr Endziel bleibt jedoch dasselbe, nämlich das Überlaufverhalten des ausgewählten Elements zu steuern.

    div>

    Körper>

    Hier das „Überlauf-Scrollen“ Klasse wird verwendet, um die Bildlaufleisten zum

    Container und zeigt sie immer an.

    Ausgabe

    In der obigen Ausgabe sind sowohl vertikale als auch horizontale Bildlaufleisten zu sehen. Dies zeigt an, dass die „Überlauf-Scrollen“ Das Dienstprogramm wurde erfolgreich auf das Element angewendet.

    Abschluss

    Um die Funktionen „overflow-auto“ und „overflow-scroll“ in Tailwind zu verwenden, müssen Sie die „Überlauf-Auto“ Und „Überlauf-Scrollen“ Hilfsklassen zu den gewünschten Elementen im HTML-Programm. Beide Hilfsklassen fügen den angegebenen Elementen Bildlaufleisten hinzu. Die Klasse „overflow-auto“ zeigt Bildlaufleisten jedoch nur an, wenn ein Bildlauf erforderlich ist, während die Klasse „overflow-scroll“ sie immer anzeigt, auch wenn kein Bildlauf erforderlich ist. Dieser Artikel hat die Methoden zur Verwendung von „overflow-auto“ und „overflow-scroll“ in Tailwind veranschaulicht.

    Über den Autor

    Laiba Younas

    Ich habe einen Bachelor in Informatik. Da ich leidenschaftlich gerne neue Technologien lerne, interessiere ich mich für die Erkundung verschiedener Programmiersprachen und teile meine Erfahrungen mit der Welt.

    Alle Beiträge anzeigen

    VERWANDTE LINUX-TIPP-BEITRÄGE

    • Wie wende ich eine Schriftglättung auf Tailwind-Elemente an?
    • Wie steuert man die Hintergrundgröße in Tailwind?
    • So steuern Sie die Whitespace-Eigenschaft eines Elements in Tailwind
    • So ändern Sie die Deckkraft einer Hintergrundfarbe in Tailwind
    • So machen Sie Bilder mit HTML und CSS responsiv
    • So entwerfen Sie responsive Fortschrittsbalken mit HTML, CSS und JavaScript
    • So erstellen Sie responsive Icons

Linux Hint LLC, [email protected]

1210 Kelly Park Circle, Morgan Hill, CA 95037
Datenschutzrichtlinie und Nutzungsbedingungen

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Nach oben scrollen