Acest articol va ilustra:
Cum se utilizează „overflow-auto” în Tailwind?
„ overflow-auto ” clasa adaugă automat bare de defilare atunci când conținutul depășește. Nu afișează bara de derulare dacă conținutul nu depășește. Pentru a utiliza „overflow-auto” în Tailwind, creați un program HTML și adăugați „ overflow-auto ” clasa de utilitate la elementul dorit din programul HTML.
Sintaxă
< element clasă = 'overflow-auto...' > ... element >
Exemplu
În acest exemplu, vom aplica „overflow-auto” utilitate la
container: < corp >
< div clasă = „overflow-auto bg-purple-300 p-4 mx-16 mt-5 h-32 text-justify” >
Tailwind CSS oferă diverse utilitare „overflow”, cum ar fi „overflow-auto”, „overflow-scroll”, „overflow-hidden”, „overflow-visible” etc. Aceste utilitare determină modul în care un anumit element gestionează conținutul care depășește containerul mărimea. Fiecare utilitar oferă o funcționalitate unică, cu toate acestea, scopul lor final rămâne același, adică să controleze comportamentul de depășire al elementului selectat.
< / div >
< / corp >
- „overflow-auto” clasa este folosită pentru a adăuga barele de defilare la container și arătați-le numai atunci când este necesară derularea.
- „bg-violet-300” clasa setează culoarea violet la culoarea de fundal a containerului.
- „p-4” clasa setează 4 unități de umplutură pe toate părțile containerului.
- „mx-16” clasa aplică cele 16 unități de marjă pe axa x a containerului.
- „mt-5” clasa aplică cele 5 unități de marjă în partea de sus a containerului.
- „h-32” clasa stabilește înălțimea containerului la 32 de unități.
- „text-justificare” clasa justifică textul conținutului din interiorul containerului.
Ieșire
Ieșirea de mai sus arată o bară de defilare verticală atunci când textul depășește. Acest lucru indică faptul că „overflow-auto” utilitatea a fost aplicată cu succes elementului.
Cum se utilizează „overflow-scroll” în Tailwind?
Acest utilitar adaugă barele de defilare în container și le arată întotdeauna chiar dacă derularea nu este necesară. De asemenea, permite derularea în toate direcțiile. Pentru a utiliza „overflow-scroll” în Tailwind, creați un program HTML și adăugați „defilare-depășire” clasă de utilitate la elementul specific din programul HTML.
Sintaxă
< element clasă = 'overflow-scroll...' > ... element > Exemplu
În acest exemplu, vom aplica „defilare-depășire” utilitate la
< div clasă = „overflow-scroll bg-purple-300 p-4 mx-16 mt-5 h-32 text-justify” >
Tailwind CSS oferă diverse utilitare „overflow”, cum ar fi „overflow-auto”, „overflow-scroll”, „overflow-hidden”, „overflow-visible” etc. Aceste utilitare determină modul în care un anumit element gestionează conținutul care depășește containerul mărimea. Fiecare utilitar oferă o funcționalitate unică, cu toate acestea, scopul lor final rămâne același, adică să controleze comportamentul de depășire al elementului selectat.
< / div >
< / corp >
Aici „defilare-depășire” clasa este folosită pentru a adăuga barele de defilare la
recipient și le arată întotdeauna.Ieșire
În rezultatul de mai sus, pot fi văzute atât barele de defilare verticale, cât și orizontale. Acest lucru indică faptul că „defilare-depășire” utilitatea a fost aplicată cu succes elementului.
Concluzie
Pentru a utiliza „overflow-auto” și „overflow-scroll” în Tailwind, este necesar să adăugați „overflow-auto” și „defilare-depășire” clase de utilitate la elementele dorite din programul HTML. Ambele clase de utilitate adaugă bare de defilare la elementele specificate. Totuși, clasa „overflow-auto” arată barele de defilare numai atunci când derularea este necesară, în timp ce clasa „overflow-scroll” le arată întotdeauna, chiar dacă derularea nu este necesară. Acest articol a ilustrat metodele de utilizare a „overflow-auto” și „overflow-scroll” în Tailwind.