Acest articol va demonstra:
Cum se utilizează „overflow-hidden” în Tailwind?
The „debordare-ascuns” clasa ascunde sau decupează conținutul care depășește dimensiunea elementului respectiv. Pentru a utiliza „overflow-hidden” în Tailwind, creați un program HTML și aplicați clasa de utilitate „overflow-hidden” cu elementul specific.
Sintaxă
Exemplu
În acest exemplu, vom aplica „debordare-ascuns” utilitar la containerul
< corp >
< div clasă = „overflow-hidden bg-purple-300 p-4 mx-16 mt-5 h-32 text-justify” >
Tailwind CSS oferă diverse 'revărsare' utilitati, cum ar fi 'overflow-auto' , 'defilare-debordare' , 'debordare-ascuns' ,
'debordare-vizibil' etc. Aceste utilitare determină modul în care un anumit element se ocupă de conţinut care depaseste
recipient mărimea . Fiecare utilitate oferă o funcționalitate unică, cu toate acestea, scopul lor final rămâne același, adică să controleze
comportamentul de preaplin al selectat element.
< / div >
< / corp >
Aici:
- „debordare-ascuns” clasa este folosită pentru a ascunde conținutul care depășește dimensiunea containerului .
- „bg-violet-300” clasa setează culoarea violet pe fundalul containerului.
- „p-4” clasa stabilește 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
În rezultatul de mai sus, conținutul debordant nu poate fi văzut, ceea ce indică faptul că proprietatea „debordare-ascunsă” a fost aplicată cu succes.
Cum se utilizează „overflow-visible” în Tailwind?
The „debordare-vizibil” clasa permite ca conținutul peste depășire să fie vizibil. Pentru a utiliza „overflow-visible” în Tailwind, creați o structură HTML și aplicați clasa de utilitate „overflow-visible” cu elementul respectiv.
Sintaxă
Exemplu
În acest exemplu, vom aplica „debordare-vizibil” utilitar la containerulpentru a afișa conținutul de overflow: < corp >
< div clasă = „overflow-visible bg-purple-300 p-4 mx-16 mt-5 h-32 text-justify” >
Tailwind CSS oferă diverse 'revărsare' utilitati, cum ar fi 'overflow-auto' , 'defilare-debordare' , 'debordare-ascuns' ,
'debordare-vizibil' etc. Aceste utilitare determină modul în care un anumit element se ocupă de conţinut care depaseste
recipient 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 preaplin al selectat element.
< / div >
< / corp >Aici, în fragmentul de cod de mai sus, „debordare-vizibil” clasa este folosită pentru a afișa conținutul care depășește dimensiunea containerului.
Ieșire
Conform rezultatului de mai sus, utilitarul „overflow-visible” a fost aplicat cu succes.
Concluzie
Pentru a folosi „overflow-hidden” și „overflow-visible” în Tailwind, adăugați „debordare-ascuns” și „debordare-vizibil” clase de utilitate cu elementele dorite în programul HTML. Utilitarul „overflow-hidden” ascunde conținutul debordant, în timp ce „overflow-visible” arată conținutul debordant al elementului specificat. Acest articol a exemplificat metoda de utilizare a utilităților „overflow-hidden” și „overflow-visible” în Tailwind.