Πώς να χρησιμοποιήσετε το 'overflow-auto' και το 'overflow-scroll' στο Tailwind;

Παράδειγμα
Σε αυτό το παράδειγμα, θα εφαρμόσουμε το “υπερχείλιση-αυτόματο” χρησιμότητα στο

• “υπερχείλιση-αυτόματο” η κλάση χρησιμοποιείται για την προσθήκη των γραμμών κύλισης στο κοντέινερ και εμφανίστε τα μόνο όταν είναι απαραίτητη η κύλιση.
• “bg-purple-300” Η τάξη ορίζει το μωβ χρώμα στο χρώμα φόντου του δοχείου.
• 'p-4' Η τάξη θέτει 4 μονάδες επένδυσης σε όλες τις πλευρές του δοχείου.
• “mx-16” η κλάση εφαρμόζει τις 16 μονάδες περιθωρίου στον άξονα x του δοχείου.
• “mt-5” Η κλάση εφαρμόζει τις 5 μονάδες περιθωρίου στην κορυφή του δοχείου.
• “h-32” Η τάξη ορίζει το ύψος του δοχείου σε 32 μονάδες.
• «κείμενο-δικαιολογώ» class δικαιολογεί το κείμενο του περιεχομένου μέσα στο κοντέινερ.

Παραγωγή


---





---

Η παραπάνω έξοδος εμφανίζει μια κάθετη γραμμή κύλισης όταν το κείμενο ξεχειλίζει. Αυτό δείχνει ότι το “υπερχείλιση-αυτόματο” Το βοηθητικό πρόγραμμα εφαρμόστηκε με επιτυχία στο στοιχείο.

Πώς να χρησιμοποιήσετε το 'overflow-scroll' στο Tailwind;

Αυτό το βοηθητικό πρόγραμμα προσθέτει τις γραμμές κύλισης στο κοντέινερ και τις εμφανίζει πάντα ακόμα κι αν η κύλιση δεν είναι απαραίτητη. Επιτρέπει επίσης κύλιση προς όλες τις κατευθύνσεις. Για να χρησιμοποιήσετε το 'overflow-scroll' στο Tailwind, δημιουργήστε ένα πρόγραμμα HTML και προσθέστε το 'υπερχείλιση-κύλιση' κλάση βοηθητικού προγράμματος στο συγκεκριμένο στοιχείο του προγράμματος HTML.





Σύνταξη

< στοιχείο τάξη = 'υπερχείλιση-κύλιση...' > ... στοιχείο >

Παράδειγμα
Σε αυτό το παράδειγμα, θα εφαρμόσουμε το 'υπερχείλιση-κύλιση' χρησιμότητα στο

δοχείο: < σώμα >

< div τάξη = 'overflow-scroll bg-purple-300 p-4 mx-16 mt-5 h-32 text-justify' >

Το Tailwind CSS παρέχει διάφορα βοηθητικά προγράμματα 'υπερχείλισης', όπως 'overflow-auto', 'overflow-scroll', 'overflow-hidden', 'overflow-visible' κ.λπ. Αυτά τα βοηθητικά προγράμματα καθορίζουν πώς ένα συγκεκριμένο στοιχείο χειρίζεται το περιεχόμενο που υπερβαίνει το κοντέινερ Μέγεθος. Κάθε βοηθητικό πρόγραμμα προσφέρει μοναδική λειτουργικότητα, ωστόσο, ο τελικός στόχος του παραμένει ο ίδιος, δηλαδή ο έλεγχος της συμπεριφοράς υπερχείλισης του επιλεγμένου στοιχείου.

< / div >

< / σώμα >

Εδώ, το 'υπερχείλιση-κύλιση' η κλάση χρησιμοποιείται για την προσθήκη των γραμμών κύλισης στο

δοχείο και τα δείχνει πάντα.

Παραγωγή



Στην παραπάνω έξοδο, φαίνονται τόσο κάθετες όσο και οριζόντιες γραμμές κύλισης. Αυτό δείχνει ότι το 'υπερχείλιση-κύλιση' Το βοηθητικό πρόγραμμα εφαρμόστηκε με επιτυχία στο στοιχείο.

συμπέρασμα

Για να χρησιμοποιήσετε το 'overflow-auto' και το 'overflow-scroll' στο Tailwind, απαιτείται να προσθέσετε το “υπερχείλιση-αυτόματο” και 'υπερχείλιση-κύλιση' κλάσεις βοηθητικού προγράμματος στα επιθυμητά στοιχεία στο πρόγραμμα HTML. Και οι δύο κατηγορίες βοηθητικών προγραμμάτων προσθέτουν γραμμές κύλισης στα καθορισμένα στοιχεία. Ωστόσο, η κλάση 'overflow-auto' εμφανίζει γραμμές κύλισης μόνο όταν είναι απαραίτητη η κύλιση, ενώ η κατηγορία 'overflow-scroll' τις εμφανίζει πάντα ακόμα και αν η κύλιση δεν είναι απαραίτητη. Αυτή η εγγραφή έχει επεξηγήσει τις μεθόδους χρήσης 'υπερχείλισης-αυτόματης' και 'υπερχείλισης-κύλισης' στο Tailwind.