Tämä kirjoitus kuvaa tapaa soveltaa keskeytyskohtia ja mediakyselyjä Tailwind CSS:n 'overflow' -apuohjelmiin.
Kuinka hyödyntää keskeytyspisteitä ja mediakyselyitä 'ylivuodon' kanssa Tailwindissä?
Luo HTML-rakenne, jos haluat käyttää tiettyjä keskeytyskohtia ja mediakyselyjä Tailwindin 'overflow'-apuohjelmissa. Käytä sitten ' md ' tai ' lg ”katkospisteitä halutulla 'ylivuoto-
Esimerkki
Tässä esimerkissä käytämme 'md' keskeytyskohta kanssa 'overflow-scroll' hyödyllisyys
kontti vierityspalkkien lisäämiseksi siihen ja näyttää ne aina keskikokoisella näytöllä: < kehon >
< div luokkaa = 'overflow-auto md:overflow-scroll bg-purple-300 p-4 mx-16 mt-5 h-36 text-justify' >
Tailwind CSS tarjoaa erilaisia 'ylivuodon' apuohjelmia, kuten
'overflow-auto', 'overflow-scroll', 'overflow-hidden', 'overflow-visible'
jne. Nämä apuohjelmat määrittävät, kuinka tietty elementti käsittelee sisältöä
joka ylittää säiliön koon. Jokainen apuohjelma tarjoaa ainutlaatuisia toimintoja,
kuitenkin niiden päätavoite pysyy samana, eli ylivuodon hallinta
valitun elementin käyttäytyminen.
< / div >
< / kehon >
Tässä:
- The 'overflow-auto' luokkaa käytetään vierityspalkkien lisäämiseen ja näytä ne vain, kun vierittäminen on välttämätöntä.
- The 'md:overflow-scroll' luokka lisää vierityspalkit ja näyttää ne aina 'md' keskeytyspiste (keskikokoinen näyttö).
Lähtö:
Yllä olevan tulosteen mukaan keskeytyskohtia ja mediakyselyjä on käytetty onnistuneesti 'ylivuodon' apuohjelmissa.
Johtopäätös
Käytä keskeytyskohtia ja mediakyselyitä Tailwindin 'overflow'-apuohjelmiin ' sm ”, “ md ' tai ' lg 'katkospisteet halutuilla' ylivuoto-