Den här artikeln kommer att visa:
Hur använder man 'overflow-hidden' i Tailwind?
De 'overflow-dold' klass döljer eller klipper innehållet som överskrider det elementets storlek. För att använda 'overflow-hidden' i Tailwind, skapa ett HTML-program och tillämpa verktygsklassen 'overflow-hidden' med det specifika elementet.
Syntax
Exempel
I det här exemplet kommer vi att tillämpa 'overflow-dold' verktyg till
< kropp >
< div klass = 'overflow-hidden bg-lila-300 p-4 mx-16 mt-5 h-32 text-justify' >
Tailwind CSS tillhandahåller olika 'svämma över' verktyg, som t.ex 'overflow-auto' , 'overflow-scroll' , 'overflow-dold' ,
'översvämningssynlig' etc. Dessa verktyg bestämmer hur ett specifikt element hanterar innehåll som överstiger
behållare storlek . Varje verktyg erbjuder unik funktionalitet, men deras slutmål förblir detsamma, d.v.s. att kontrollera
överflödesbeteendet hos vald element.
< / div >
< / kropp >
Här:
- 'overflow-dold' klass används för att dölja innehållet som överstiger storleken på -behållaren.
- 'bg-lila-300' klass ställer in den lila färgen till behållarens bakgrund.
- 'p-4' klass ställer in 4 enheter av 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
I ovanstående utdata kan det överflödande innehållet inte ses, vilket indikerar att egenskapen 'overflow-hidden' har tillämpats framgångsrikt.
Hur använder man 'overflow-visible' i Tailwind?
De 'översvämningssynlig' klass gör att det överskridande innehållet blir synligt. För att använda 'overflow-visible' i Tailwind, skapa en HTML-struktur och tillämpa verktygsklassen 'overflow-visible' med det specifika elementet.
Syntax
Exempel
I det här exemplet kommer vi att tillämpa 'översvämningssynlig' verktyg till-behållaren för att visa överflödesinnehållet: < kropp >
< div klass = 'overflow-visible bg-lila-300 p-4 mx-16 mt-5 h-32 text-justify' >
Tailwind CSS tillhandahåller olika 'svämma över' verktyg, som t.ex 'overflow-auto' , 'overflow-scroll' , 'overflow-dold' ,
'översvämningssynlig' etc. Dessa verktyg bestämmer hur ett specifikt element hanterar innehåll som överstiger
behållare storlek . Varje verktyg erbjuder unik funktionalitet, men deras slutmål förblir detsamma, d.v.s. att kontrollera
överflödesbeteendet hos vald element.
< / div >
< / kropp >Här, i kodavsnittet ovan, visas 'översvämningssynlig' klass används för att visa innehållet som överstiger behållarens storlek.
Produktion
Enligt ovanstående utdata har verktyget 'overflow-visible' använts framgångsrikt.
Slutsats
För att använda 'overflow-hidden' och 'overflow-visible' i Tailwind, lägg till 'overflow-dold' och 'översvämningssynlig' verktygsklasser med önskade element i HTML-programmet. Verktyget 'overflow-hidden' döljer det överfulla innehållet medan 'overflow-visible' visar det överfulla innehållet i det angivna elementet. Den här artikeln har exemplifierat metoden att använda 'overflow-hidden' och 'overflow-visible' verktyg i Tailwind.