Ten zapis zilustruje:
Jak korzystać z „overflow-auto” w Tailwind?
„ przepełnienie-automatyczne ” automatycznie dodaje paski przewijania, gdy zawartość jest przepełniona. Nie pokazuje paska przewijania, jeśli zawartość nie jest przepełniona. Aby użyć „overflow-auto” w Tailwind, utwórz program HTML i dodaj „ przepełnienie-automatyczne ” Utility Class do żądanego elementu w programie HTML.
Składnia
< element klasa = 'przepełnienie-auto...' > ... element >
Przykład
W tym przykładzie zastosujemy „przepełnienie-automatyczne” użyteczność do
pojemnik: < ciało >
< dz klasa = „overflow-auto bg-purple-300 p-4 mx-16 mt-5 h-32 text-justify” >
Tailwind CSS zapewnia różne narzędzia „przepełnienia”, takie jak „overflow-auto”, „overflow-scroll”, „overflow-hidden”, „overflow-visible” itp. Narzędzia te określają, w jaki sposób określony element obsługuje zawartość wykraczającą poza kontener rozmiar. Każde narzędzie oferuje unikalną funkcjonalność, jednak ich ostateczny cel pozostaje ten sam, tj. kontrolowanie zachowania przepełnienia wybranego elementu.
< / dz >
< / ciało >
- „przepełnienie-automatyczne” klasa służy do dodawania pasków przewijania do pliku kontenera i pokazuj je tylko wtedy, gdy przewijanie jest konieczne.
- „bg-fioletowy-300” class ustawia kolor fioletowy na kolor tła kontenera.
- „p-4” klasa ustawia 4 jednostki wyściółki na wszystkie strony kontenera.
- „mx-16” class stosuje 16 jednostek marginesu na osi x kontenera.
- „MT-5” class nakłada 5 jednostek marginesu na górę kontenera.
- „h-32” class ustawia wysokość kontenera na 32 jednostki.
- „wyjustuj tekst” class wyrównuje tekst zawartości wewnątrz kontenera.
Wyjście
Powyższe dane wyjściowe pokazują pionowy pasek przewijania, gdy tekst się przepełnia. Wskazuje to, że „przepełnienie-automatyczne” Narzędzie zostało pomyślnie zastosowane do elementu.
Jak korzystać z „overflow-scroll” w Tailwind?
To narzędzie dodaje paski przewijania do kontenera i zawsze je pokazuje, nawet jeśli przewijanie nie jest konieczne. Umożliwia również przewijanie we wszystkich kierunkach. Aby użyć „overflow-scroll” w Tailwind, utwórz program HTML i dodaj plik „przepełnienie-przewiń” klasy użytkowej do określonego elementu w programie HTML.
Składnia
< element klasa = 'przepełnienie-przewiń...' > ... element > Przykład
W tym przykładzie zastosujemy „przepełnienie-przewiń” użyteczność do
< dz klasa = „overflow-scroll bg-purple-300 p-4 mx-16 mt-5 h-32 text-justify” >
Tailwind CSS zapewnia różne narzędzia „przepełnienia”, takie jak „overflow-auto”, „overflow-scroll”, „overflow-hidden”, „overflow-visible” itp. Narzędzia te określają, w jaki sposób określony element obsługuje zawartość wykraczającą poza kontener rozmiar. Każde narzędzie oferuje unikalną funkcjonalność, jednak ich ostateczny cel pozostaje ten sam, tj. kontrolowanie zachowania przepełnienia wybranego elementu.
< / dz >
< / ciało >
Tutaj „przepełnienie-przewiń” klasa służy do dodawania pasków przewijania do pliku
pojemnik i zawsze je pokazuje.Wyjście
Na powyższym wyjściu widać zarówno pionowe, jak i poziome paski przewijania. Wskazuje to, że „przepełnienie-przewiń” Narzędzie zostało pomyślnie zastosowane do elementu.
Wniosek
Aby korzystać z „overflow-auto” i „overflow-scroll” w Tailwind, wymagane jest dodanie pliku „przepełnienie-automatyczne” I „przepełnienie-przewiń” klasy narzędzi do żądanych elementów w programie HTML. Obie klasy narzędzi dodają paski przewijania do określonych elementów. Jednak klasa „overflow-auto” pokazuje paski przewijania tylko wtedy, gdy przewijanie jest konieczne, podczas gdy klasa „overflow-scroll” pokazuje je zawsze, nawet jeśli przewijanie nie jest konieczne. W tym artykule zilustrowano metody użycia „overflow-auto” i „overflow-scroll” w Tailwind.