Ten artykuł pokaże:
- Jak korzystać z „ukrytego przepełnienia” w Tailwind?
- Jak korzystać z „przepełnienia widocznego” w Tailwind?
Jak korzystać z „ukrytego przepełnienia” w Tailwind?
The „przepełnienie ukryte” class ukrywa lub przycina zawartość, która przekracza rozmiar tego elementu. Aby wykorzystać „ukryte przepełnienie” w Tailwind, utwórz program HTML i zastosuj klasę narzędzia „ukryte przepełnienie” z określonym elementem.
Składnia
Przykład
W tym przykładzie zastosujemy „przepełnienie ukryte” narzędzie do kontenera
< ciało >
< dz klasa = „przepełnienie-ukryte bg-purple-300 p-4 mx-16 mt-5 h-32 wyjustowanie tekstu” >
CSS Tailwind zapewnia różne 'przelewowy' użytkowe, jak np „przepełnienie-automatyczne” , „przepełnienie-przewiń” , „przepełnienie ukryte” ,
„przepełnienie widoczne” itp. Te narzędzia określają, w jaki sposób określony element obsługuje plik treść który przekracza
pojemnik rozmiar . Każde narzędzie oferuje unikalną funkcjonalność, jednak ich cel końcowy pozostaje ten sam, tj. kontrola
zachowanie przepełnienia wybrany element.
< / dz >
< / ciało >
Tutaj:
- „przepełnienie ukryte” class służy do ukrywania zawartości przekraczającej rozmiar kontenera .
- „bg-fioletowy-300” class ustawia fioletowy kolor tła kontenera.
- „p-4” class 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
W powyższym wyniku nie widać przepełnionej treści, co wskazuje, że właściwość „ukryte przepełnienie” została pomyślnie zastosowana.
Jak korzystać z „przepełnienia widocznego” w Tailwind?
The „przelew-widoczny” class umożliwia wyświetlenie treści przekraczającej granice. Aby wykorzystać „overflow-visible” w Tailwind, utwórz strukturę HTML i zastosuj klasę narzędziową „overflow-visible” do konkretnego elementu.
Składnia
Przykład
W tym przykładzie zastosujemy „przelew-widoczny” narzędzie do kontenera, aby wyświetlić zawartość przepełnienia: < ciało >
< dz klasa = „przepełnienie widoczne bg-fioletowy-300 p-4 mx-16 mt-5 h-32 tekst-justowanie” >
CSS Tailwind zapewnia różne 'przelewowy' użytkowe, jak np „przepełnienie-automatyczne” , „przepełnienie-przewiń” , „przepełnienie ukryte” ,
„przepełnienie widoczne” itp. Te narzędzia określają, w jaki sposób określony element obsługuje plik treść który przekracza
pojemnik rozmiar . Każde narzędzie oferuje unikalną funkcjonalność, jednak ich cel końcowy pozostaje ten sam, tj. kontrola
zachowanie przepełnienia wybrany element.
< / dz >
< / ciało >Tutaj, w powyższym fragmencie kodu, plik „przelew-widoczny” class służy do wyświetlania zawartości przekraczającej rozmiar kontenera.
Wyjście
Zgodnie z powyższym wynikiem, narzędzie „overflow-visible” zostało pomyślnie zastosowane.
Wniosek
Aby użyć „przepełnienia ukrytego” i „widocznego przepełnienia” w Tailwind, dodaj „przepełnienie ukryte” I „przelew-widoczny” klasy narzędzi z żądanymi elementami w programie HTML. Narzędzie „overflow-hidden” ukrywa przepełnioną zawartość, podczas gdy „overflow-visible” pokazuje przepełnioną zawartość określonego elementu. W tym artykule zilustrowano metodę użycia narzędzi „ukrytych z przepełnieniem” i „widocznych z przepełnieniem” w Tailwind.