See kirjutis illustreerib:
Kuidas kasutada Tailwindis “overflow-auto”?
' ülevool-auto ” klass lisab sisu ületäitumisel automaatselt kerimisribad. Kerimisriba ei kuvata, kui sisu üle ei voola. Tailwindis 'overflow-auto' kasutamiseks looge HTML-programm ja lisage ' ülevool-auto ” utiliidiklass soovitud elemendile HTML-programmis.
Süntaks
< element klass = 'overflow-auto ...' > ... element >
Näide
Selles näites rakendame 'ülevoolu-automaat' kasulikkust
konteiner: < keha >
< div klass = 'overflow-auto bg-purple-300 p-4 mx-16 mt-5 h-32 text-justify' >
Tailwind CSS pakub erinevaid 'ülevoolu' utiliite, nagu 'overflow-auto', 'overflow-scroll', 'overflow-hidden', 'overflow-visible' jne. Need utiliidid määravad, kuidas konkreetne element käsitleb konteinerit ületava sisu suurus. Iga utiliit pakub ainulaadset funktsionaalsust, kuid nende lõppeesmärk jääb samaks, st juhtida valitud elemendi ülevoolu käitumist.
< / div >
< / keha >
- 'ülevoolu-automaat' klassi kasutatakse kerimisribade lisamiseks konteinerisse ja kuvage neid ainult siis, kui kerimine on vajalik.
- 'bg-lilla-300' klass määrab lilla värvi konteineri taustavärviks.
- 'p-4' klassi komplektid 4 ühikut polsterdust konteineri kõikidel külgedel.
- '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äljund näitab teksti ületäitumisel vertikaalset kerimisriba. See näitab, et 'ülevoolu-automaat' utiliit on elemendile edukalt rakendatud.
Kuidas kasutada Tailwindis 'ülevoolu-kerimist'?
See utiliit lisab kerimisribad konteinerisse ja näitab neid alati ka siis, kui kerimine pole vajalik. Samuti võimaldab see kerida igas suunas. Tailwindis „ülevoolu-kerimise” kasutamiseks looge HTML-programm ja lisage 'ületäitumine-kerimine' utiliidiklass konkreetsele HTML-programmi elemendile.
Süntaks
< element klass = 'ületäitumine-kerimine ...' > ... element > Näide
Selles näites rakendame 'ületäitumine-kerimine' kasulikkust
< div klass = 'overflow-scroll bg-purple-300 p-4 mx-16 mt-5 h-32 text-justify' >
Tailwind CSS pakub erinevaid 'ülevoolu' utiliite, nagu 'overflow-auto', 'overflow-scroll', 'overflow-hidden', 'overflow-visible' jne. Need utiliidid määravad, kuidas konkreetne element käsitleb konteinerit ületava sisu suurus. Iga utiliit pakub ainulaadset funktsionaalsust, kuid nende lõppeesmärk jääb samaks, st juhtida valitud elemendi ülevoolu käitumist.
< / div >
< / keha >
Siin, 'ületäitumine-kerimine' klassi kasutatakse kerimisribade lisamiseks
konteinerisse ja näitab neid alati.Väljund
Ülaltoodud väljundis on näha nii vertikaalsed kui ka horisontaalsed kerimisribad. See näitab, et 'ületäitumine-kerimine' utiliit on elemendile edukalt rakendatud.
Järeldus
Funktsioonide „overflow-auto” ja „overflow-scroll” kasutamiseks Tailwindis tuleb lisada 'ülevoolu-automaat' ja 'ületäitumine-kerimine' utiliidiklassid soovitud HTML-programmi elementidele. Mõlemad utiliidiklassid lisavad määratud elementidele kerimisribad. Kuid „overflow-auto” klass näitab kerimisribasid ainult siis, kui kerimine on vajalik, samas kui klass „overflow-scroll” näitab neid alati, isegi kui kerimine pole vajalik. See kirjutis on illustreerinud Tailwindis 'overflow-auto' ja 'overflow-scroll' kasutamise meetodeid.