Den här texten kommer att illustrera:
Hur använder man 'overflow-auto' i Tailwind?
den ' overflow-auto ” klass lägger automatiskt till rullningslister när innehållet svämmar över. Den visar inte rullningslisten om innehållet inte flödar över. För att använda 'overflow-auto' i Tailwind, skapa ett HTML-program och lägg till ' overflow-auto ” verktygsklass till önskat element i HTML-programmet.
Syntax
< element klass = 'overflow-auto...' > ... element >
Exempel
I det här exemplet kommer vi att tillämpa 'overflow-auto' nytta till
behållare: < kropp >
< div klass = 'overflow-auto bg-lila-300 p-4 mx-16 mt-5 h-32 text-justify' >
Tailwind CSS tillhandahåller olika 'overflow'-verktyg, såsom 'overflow-auto', 'overflow-scroll', 'overflow-hidden', 'overflow-visible' etc. Dessa verktyg bestämmer hur ett specifikt element hanterar innehållet som överskrider behållaren storlek. Varje verktyg erbjuder unik funktionalitet, men deras slutmål förblir detsamma, d.v.s. att kontrollera överflödesbeteendet för det valda elementet.
< / div >
< / kropp >
- 'overflow-auto' klass används för att lägga till rullningslisterna till behållare och visa dem endast när rullning är nödvändig.
- 'bg-lila-300' klass ställer in den lila färgen till behållarens bakgrundsfärg.
- 'p-4' klass ställer in 4 enheter stoppning på containerns alla sidor.
- 'mx-16' klass tillämpar de 16 marginalenheterna på containerns x-axel.
- 'mt-5' klass tillämpar de 5 enheterna marginal till toppen av behållaren.
- 'h-32' klass ställer in höjden på containern till 32 enheter.
- 'textjustera' klass motiverar texten i innehållet inuti behållaren.
Produktion
Ovanstående utdata visar en vertikal rullningslist när texten svämmar över. Detta indikerar att 'overflow-auto' verktyget har använts på elementet.
Hur man använder 'overflow-scroll' i Tailwind?
Det här verktyget lägger till rullningslisterna i behållaren och visar dem alltid även om rullningen inte är nödvändig. Det tillåter också rullning i alla riktningar. För att använda 'overflow-scroll' i Tailwind, skapa ett HTML-program och lägg till 'overflow-scroll' verktygsklass till det specifika elementet i HTML-programmet.
Syntax
< element klass = 'overflow-scroll...' > ... element > Exempel
I det här exemplet kommer vi att tillämpa 'overflow-scroll' nytta till
< div klass = 'overflow-scroll bg-purple-300 p-4 mx-16 mt-5 h-32 text-justify' >
Tailwind CSS tillhandahåller olika 'overflow'-verktyg, såsom 'overflow-auto', 'overflow-scroll', 'overflow-hidden', 'overflow-visible' etc. Dessa verktyg bestämmer hur ett specifikt element hanterar innehållet som överskrider behållaren storlek. Varje verktyg erbjuder unik funktionalitet, men deras slutmål förblir detsamma, d.v.s. att kontrollera överflödesbeteendet för det valda elementet.
< / div >
< / kropp >
Här, den 'overflow-scroll' klass används för att lägga till rullningslisterna till
behållare och visar dem alltid.Produktion
I ovanstående utgång kan både vertikala och horisontella rullningslister ses. Detta indikerar att 'overflow-scroll' verktyget har använts på elementet.
Slutsats
För att använda 'overflow-auto' och 'overflow-scroll' i Tailwind, måste du lägga till 'overflow-auto' och 'overflow-scroll' verktygsklasser till de önskade elementen i HTML-programmet. Båda verktygsklasserna lägger till rullningslister till de angivna elementen. Men klassen 'overflow-auto' visar rullningslister endast när rullning är nödvändig medan klassen 'overflow-scroll' alltid visar dem även om rullningen inte är nödvändig. Denna uppskrivning har illustrerat metoderna för att använda 'overflow-auto' och 'overflow-scroll' i Tailwind.