Tento zápis bude ilustrovat:
Jak používat „overflow-auto“ v Tailwindu?
' přetečení-auto ” třída automaticky přidá posuvníky, když obsah přeteče. Pokud obsah nepřeteče, nezobrazí se posuvník. Chcete-li v Tailwindu použít „overflow-auto“, vytvořte HTML program a přidejte „ přetečení-auto ” třídy utility na požadovaný prvek v programu HTML.
Syntax
< živel třída = 'přetečení-auto...' > ... živel >
Příklad
V tomto příkladu použijeme 'automatické přetečení' užitečnost k
kontejner: < tělo >
< div třída = 'overflow-auto bg-purple-300 p-4 mx-16 mt-5 h-32 text-justify' >
Tailwind CSS poskytuje různé 'overflow' nástroje, jako je 'overflow-auto', 'overflow-scroll', 'overflow-hidden', 'overflow-visible' atd. Tyto nástroje určují, jak konkrétní prvek zachází s obsahem, který přesahuje kontejner velikost. Každá utilita nabízí unikátní funkcionalitu, nicméně jejich konečný cíl zůstává stejný, tedy řídit chování přetečení vybraného prvku.
< / div >
< / tělo >
- 'automatické přetečení' třída se používá k přidání posuvníků do kontejneru a zobrazit je pouze v případě, že je nutné rolování.
- 'bg-purple-300' třída nastaví fialovou barvu na barvu pozadí kontejneru.
- 'p-4' třída nastavuje 4 jednotky vycpávky na všech stranách kontejneru.
- 'mx-16' třída aplikuje 16 jednotek okraje na osu x kontejneru.
- 'mt-5' třída aplikuje 5 jednotek okraje na horní část kontejneru.
- 'h-32' třída nastavuje výšku kontejneru na 32 jednotek.
- 'text-zarovnat' class zarovnává text obsahu uvnitř kontejneru.
Výstup
Výše uvedený výstup zobrazuje svislý posuvník, když text přeteče. To naznačuje, že 'automatické přetečení' obslužný program byl úspěšně aplikován na prvek.
Jak používat „overflow-scroll“ v Tailwindu?
Tento nástroj přidá posuvníky do kontejneru a vždy je zobrazí, i když posouvání není nutné. Umožňuje také rolování ve všech směrech. Chcete-li v Tailwindu použít „přetečení-rolování“, vytvořte program HTML a přidejte soubor 'přetečení-rolování' pomocná třída ke konkrétnímu prvku v programu HTML.
Syntax
< živel třída = 'přetečení-rolování...' > ... živel > Příklad
V tomto příkladu použijeme 'přetečení-rolování' užitečnost k
< div třída = 'overflow-scroll bg-purple-300 p-4 mx-16 mt-5 h-32 text-justify' >
Tailwind CSS poskytuje různé 'overflow' nástroje, jako je 'overflow-auto', 'overflow-scroll', 'overflow-hidden', 'overflow-visible' atd. Tyto nástroje určují, jak konkrétní prvek zachází s obsahem, který přesahuje kontejner velikost. Každá utilita nabízí unikátní funkcionalitu, nicméně jejich konečný cíl zůstává stejný, tedy řídit chování přetečení vybraného prvku.
< / div >
< / tělo >
Tady, 'přetečení-rolování' třída se používá k přidání posuvníků do
kontejneru a vždy je zobrazuje.Výstup
Ve výše uvedeném výstupu jsou vidět vertikální i horizontální posuvníky. To naznačuje, že 'přetečení-rolování' obslužný program byl úspěšně aplikován na prvek.
Závěr
Chcete-li v Tailwindu používat funkce „overflow-auto“ a „overflow-scroll“, je nutné přidat 'automatické přetečení' a 'přetečení-rolování' třídy obslužných programů na požadované prvky v programu HTML. Obě třídy nástrojů přidávají k určeným prvkům posuvníky. Třída „overflow-auto“ však zobrazuje posuvníky pouze v případě, že je posouvání nezbytné, zatímco třída „overflow-scroll“ je zobrazuje vždy, i když posouvání není nutné. Tento zápis ilustruje metody použití „overflow-auto“ a „overflow-scroll“ v Tailwindu.