Tämä kirjoitus havainnollistaa:
Kuinka käyttää 'overflow-autoa' Tailwindissä?
' ylivuoto-auto ” luokka lisää automaattisesti vierityspalkkeja, kun sisältö täyttyy. Se ei näytä vierityspalkkia, jos sisältö ei vuoda yli. Jos haluat käyttää 'overflow-autoa' Tailwindissä, tee HTML-ohjelma ja lisää ' ylivuoto-auto ” apuohjelmaluokka haluttuun elementtiin HTML-ohjelmassa.
Syntaksi
< elementti luokkaa = 'overflow-auto...' > ... elementti >
Esimerkki
Tässä esimerkissä käytämme 'overflow-auto' hyödyllisyys
kontti: < kehon >
< div luokkaa = 'overflow-auto bg-purple-300 p-4 mx-16 mt-5 h-32 text-justify' >
Tailwind CSS tarjoaa erilaisia 'overflow' -apuohjelmia, kuten 'overflow-auto', 'overflow-scroll', 'overflow-hidden', 'overflow-visible' jne. Nämä apuohjelmat määrittävät, kuinka tietty elementti käsittelee säilön ylittävää sisältöä. koko. Jokainen apuohjelma tarjoaa ainutlaatuisia toimintoja, mutta niiden päätavoite on sama, eli ohjata valitun elementin ylivuotokäyttäytymistä.
< / div >
< / kehon >
- 'overflow-auto' luokkaa käytetään vierityspalkkien lisäämiseen ja näytä ne vain, kun vierittäminen on välttämätöntä.
- 'bg-violetti-300' luokka asettaa violetin värin säilön taustaväriksi.
- 'p-4' luokka sisältää 4 yksikköä pehmustetta kontin jokaiselle sivulle.
- 'mx-16' luokka soveltaa 16 marginaaliyksikköä säiliön x-akselilla.
- 'mt-5' luokka soveltaa 5 yksikköä marginaalia säiliön yläosaan.
- 'h-32' luokka asettaa kontin korkeudeksi 32 yksikköä.
- 'tekstipohjainen' luokka tasaa säilön sisällä olevan sisällön tekstin.
Lähtö
Yllä oleva tulos näyttää pystysuoran vierityspalkin, kun tekstiä tulee yli. Tämä osoittaa, että 'overflow-auto' apuohjelma on käytetty elementtiin onnistuneesti.
Kuinka käyttää 'overflow-scrollia' Tailwindissä?
Tämä apuohjelma lisää vierityspalkit säilöön ja näyttää ne aina, vaikka vieritys ei olisi välttämätöntä. Se mahdollistaa myös vierityksen kaikkiin suuntiin. Jos haluat käyttää 'overflow-scrollia' Tailwindissä, tee HTML-ohjelma ja lisää 'overflow-scroll' hyödyllisyysluokka tiettyyn HTML-ohjelman elementtiin.
Syntaksi
< elementti luokkaa = 'overflow-scroll...' > ... elementti > Esimerkki
Tässä esimerkissä käytämme 'overflow-scroll' hyödyllisyys
< div luokkaa = 'overflow-scroll bg-purple-300 p-4 mx-16 mt-5 h-32 text-justify' >
Tailwind CSS tarjoaa erilaisia 'overflow' -apuohjelmia, kuten 'overflow-auto', 'overflow-scroll', 'overflow-hidden', 'overflow-visible' jne. Nämä apuohjelmat määrittävät, kuinka tietty elementti käsittelee säilön ylittävää sisältöä. koko. Jokainen apuohjelma tarjoaa ainutlaatuisia toimintoja, mutta niiden päätavoite on sama, eli ohjata valitun elementin ylivuotokäyttäytymistä.
< / div >
< / kehon >
Tässä, 'overflow-scroll' luokkaa käytetään vierityspalkkien lisäämiseen
ja näyttää ne aina.Lähtö
Yllä olevassa tulosteessa voidaan nähdä sekä pysty- että vaakasuuntaiset vierityspalkit. Tämä osoittaa, että 'overflow-scroll' apuohjelma on käytetty elementtiin onnistuneesti.
Johtopäätös
Jos haluat käyttää 'overflow-auto'- ja 'overflow-scroll'-toimintoja Tailwindissä, on lisättävä 'overflow-auto' ja 'overflow-scroll' apuohjelmaluokat haluttuihin elementteihin HTML-ohjelmassa. Molemmat apuohjelmaluokat lisäävät vierityspalkkeja määritettyihin elementteihin. Luokka 'overflow-auto' näyttää vierityspalkit kuitenkin vain silloin, kun vieritys on tarpeen, kun taas 'overflow-scroll' -luokka näyttää ne aina, vaikka vieritys ei olisi välttämätöntä. Tämä kirjoitus on havainnollistanut menetelmiä käyttää 'overflow-auto' ja 'overflow-scroll' Tailwindissä.