Tämä artikkeli osoittaa:
- Kuinka käyttää 'overflow-piilotettua' Tailwindissä?
- Kuinka käyttää 'overflow-visible' -toimintoa Tailwindissä?
Kuinka käyttää 'overflow-piilotettua' Tailwindissä?
The 'ylivuoto piilotettu' luokka piilottaa tai leikkaa sisällön, joka ylittää kyseisen elementin koon. Hyödynnä 'overflow-hidden' Tailwindissä luomalla HTML-ohjelma ja käyttämällä 'overflow-hidden' -apuluokkaa tietyn elementin kanssa.
Syntaksi
Esimerkki
Tässä esimerkissä käytämme 'ylivuoto piilotettu' apuohjelma
< kehon >
< div luokkaa = 'overflow-hidden bg-purple-300 p-4 mx-16 mt-5 h-32 text-justify' >
Tailwind CSS tarjoaa erilaisia 'ylivuoto' apuohjelmat, kuten 'overflow-auto' , 'overflow-scroll' , 'ylivuoto piilotettu' ,
'ylivuoto-näkyvä' jne. Nämä apuohjelmat määrittävät, kuinka tietty elementti käsittelee sisältö joka ylittää
kontti koko . Jokainen apuohjelma tarjoaa ainutlaatuisia toimintoja, mutta niiden päätavoite on sama, eli ohjata
ylivuotokäyttäytyminen valittu elementti.
< / div >
< / kehon >
Tässä:
- 'ylivuoto piilotettu' luokkaa käytetään piilottamaan sisältö, joka ylittää -säilön koon.
- 'bg-violetti-300' luokka asettaa violetin värin säilön taustalle.
- 'p-4' luokka sisältää 4 yksikköä pehmustetta säiliön joka puolelle.
- '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ä olevassa tulosteessa ylivuotosisältöä ei voi nähdä, mikä osoittaa, että 'overflow-hidden' -ominaisuutta on käytetty onnistuneesti.
Kuinka käyttää 'overflow-visible' -toimintoa Tailwindissä?
The 'ylivuoto-näkyvä' luokka mahdollistaa ylimääräisen sisällön näkymisen. Hyödynnä 'overflow-visible' Tailwindissä luomalla HTML-rakenne ja käyttämällä 'overflow-visible' -apuluokkaa tietyn elementin kanssa.
Syntaksi
Esimerkki
Tässä esimerkissä käytämme 'ylivuoto-näkyvä' apuohjelma-säilöön näyttämään ylivuodon sisällön: < kehon >
< div luokkaa = 'overflow-visible bg-purple-300 p-4 mx-16 mt-5 h-32 text-justify' >
Tailwind CSS tarjoaa erilaisia 'ylivuoto' apuohjelmat, kuten 'overflow-auto' , 'overflow-scroll' , 'ylivuoto piilotettu' ,
'ylivuoto-näkyvä' jne. Nämä apuohjelmat määrittävät, kuinka tietty elementti käsittelee sisältö joka ylittää
kontti koko . Jokainen apuohjelma tarjoaa ainutlaatuisia toimintoja, mutta niiden päätavoite on sama, eli ohjata
ylivuotokäyttäytyminen valittu elementti.
< / div >
< / kehon >Tässä, yllä olevassa koodinpätkässä, 'ylivuoto-näkyvä' luokkaa käytetään näyttämään sisältöä, joka ylittää säilön koon.
Lähtö
Yllä olevan tulosteen mukaan 'overflow-visible' -apuohjelma on otettu onnistuneesti käyttöön.
Johtopäätös
Jos haluat käyttää 'overflow-piilotettu' ja 'overflow-visible' Tailwindissä, lisää 'ylivuoto piilotettu' ja 'ylivuoto-näkyvä' apuohjelmaluokat halutuilla elementeillä HTML-ohjelmassa. 'Overflow-piilotettu' -apuohjelma piilottaa ylivuodon sisältävän sisällön, kun taas 'overflow-visible' näyttää määritetyn elementin ylivuodon. Tämä artikkeli on esimerkki tapaa käyttää 'overflow-piilotettuja' ja 'ylivuodon näkyviä' apuohjelmia Tailwindissä.