See artikkel demonstreerib:
- Kuidas kasutada Tailwindis 'ülevoolu-peidetud' funktsiooni?
- Kuidas kasutada Tailwindis 'ülevoolu-nähtavat'?
Kuidas kasutada Tailwindis 'ülevoolu-peidetud' funktsiooni?
The 'ülevoolu-peidetud' klass peidab või lõikab välja sisu, mis ületab selle elemendi suurust. Tailwindis 'overflow-peidetud' kasutamiseks looge HTML-programm ja rakendage konkreetse elemendiga utiliidiklass 'overflow-hidden'.
Süntaks
Näide
Selles näites rakendame 'ülevoolu-peidetud' utiliit konteinerisse
< keha >
< div klass = 'ületäitmine-peidetud bg-lilla-300 p-4 mx-16 mt-5 h-32 text-justify' >
Tailwind CSS pakub erinevaid 'ülevool' kommunaalteenused, nt 'overflow-auto' , 'ületäitumine-kerimine' , 'ülevool-peidetud' ,
'ülevool-nähtav' jne. Need utiliidid määravad, kuidas konkreetne element käsitleb sisu mis ületab
konteiner suurus . Iga utiliit pakub ainulaadset funktsionaalsust, kuid nende lõppeesmärk jääb samaks, st juhtida
ülevoolu käitumine valitud element.
< / div >
< / keha >
Siin:
- 'ülevoolu-peidetud' klassi kasutatakse sisu peitmiseks, mis ületab konteineri suurust.
- 'bg-lilla-300' klass määrab konteineri taustale lilla värvi.
- 'p-4' klassi komplektid 4 ühikut polsterdust konteineri igal küljel.
- 'mx-16' klass rakendab konteineri x-teljel 16 varuühikut.
- 'mt-5' klass rakendab 5 ühikut varu mahuti ülaosale.
- 'h-32' klass määrab konteineri kõrguseks 32 ühikut.
- 'teksti õigustamine' klass õigustab konteineri sees oleva sisu teksti.
Väljund
Ülaltoodud väljundis ei ole ületäitunud sisu näha, mis näitab, et atribuut 'ületäitmine-peidetud' on edukalt rakendatud.
Kuidas kasutada Tailwindis 'ülevoolu-nähtavat'?
The 'ülevool-nähtav' klass võimaldab ülemäärast sisu nähtavaks teha. Tailwindis „overflow-visible” kasutamiseks looge HTML-struktuur ja rakendage konkreetse elemendiga „overflow-visible” utiliidiklass.
Süntaks
Näide
Selles näites rakendame 'ülevool-nähtav' utiliit konteinerisseületäitumise sisu kuvamiseks: < keha >
< div klass = 'ülevool-nähtav bg-lilla-300 p-4 mx-16 mt-5 h-32 text-justify' >
Tailwind CSS pakub erinevaid 'ülevool' kommunaalteenused, nt 'overflow-auto' , 'ületäitumine-kerimine' , 'ülevool-peidetud' ,
'ülevool-nähtav' jne. Need utiliidid määravad, kuidas konkreetne element käsitleb sisu mis ületab
konteiner suurus . Iga utiliit pakub ainulaadset funktsionaalsust, kuid nende lõppeesmärk jääb samaks, st juhtida
ülevoolu käitumine valitud element.
< / div >
< / keha >Siin, ülaltoodud koodilõigul, on 'ülevool-nähtav' klassi kasutatakse konteineri suurusest suurema sisu näitamiseks.
Väljund
Ülaltoodud väljundi kohaselt on 'ülevoolu nähtav' utiliit edukalt rakendatud.
Järeldus
Tailwindis valikute „ületäitmine-peidetud” ja „ülevoolu-nähtav” kasutamiseks lisage 'ülevoolu-peidetud' ja 'ülevool-nähtav' utiliidiklassid soovitud elementidega HTML-programmis. Utiliit 'ületäitumine peidetud' peidab ületäituva sisu, samas kui 'ületäitmine-nähtav' näitab määratud elemendi ületäitunud sisu. See artikkel on näide sellest, kuidas Tailwindis kasutatakse 'ülevooluga peidetud' ja 'ülevooluga nähtavaid' utiliite.