Πώς να στερεώσετε κείμενο σε έναν συγκεκριμένο αριθμό γραμμών στο Tailwind

Αυτό το άρθρο θα παρέχει τη διαδικασία για τη σύσφιξη του κειμένου σε έναν ουραίο άνεμο.

Πώς να στερεώσετε το κείμενο σε έναν συγκεκριμένο αριθμό γραμμών;

Η κλάση σύσφιξης γραμμής στο Tailwind περιορίζει το περιεχόμενο κειμένου σε ένα μπλοκ σε έναν συγκεκριμένο αριθμό γραμμών. Κάνοντας αυτό, το μπλοκ κειμένου θα κρύψει το κείμενο μετά τον αριθμό των γραμμών που καθορίζονται στην τάξη. Μπορεί να χρησιμοποιηθεί σε μια ιστοσελίδα για να δείξει στον χρήστη ότι υπάρχουν κάποιες πληροφορίες κειμένου ή για να κρύψει όλο το περιττό κείμενο για να αποφύγει τον κορεσμό στην ιστοσελίδα.

Σύνταξη

Η παρακάτω σύνταξη παρέχεται στο ' τάξη ” χαρακτηριστικό στοιχείου για εφαρμογή σύσφιξης γραμμής:

Στη σύνταξη που ορίζεται παραπάνω, ο χρήστης μπορεί να χρησιμοποιήσει τους αριθμούς από ' 1 έως 6 ” για τη χρήση των προεπιλεγμένων κλάσεων σύσφιξης γραμμής. Για παράδειγμα, το « γραμμή-σφιγκτήρας-1 Η τάξη δεν θα αφήσει το περιεχόμενο κειμένου να υπερβαίνει τη μία γραμμή.

Ας κατανοήσουμε την έννοια της κλάσης 'line-cam' μέσα από μερικά παραδείγματα.

Παράδειγμα 1: Χρησιμοποιήστε την κλάση σφιγκτήρα γραμμής για να περιορίσετε το περιεχόμενο σε έναν συγκεκριμένο αριθμό γραμμών

Ας περιορίσουμε το περιεχόμενο κειμένου σε τρεις γραμμές χρησιμοποιώντας την κλάση line-clamping στο Tailwind όπως γίνεται παρακάτω:

Η επεξήγηση του παραπάνω κώδικα έχει ως εξής:

• ΕΝΑ ' div ' το στοιχείο δημιουργείται με στρογγυλεμένες γωνίες χρησιμοποιώντας το ' στρογγυλεμένο-lg ” τάξη. Παρέχει το περιθώριο και το γέμισμα χρησιμοποιώντας το ' m-{number} ' & ' p-{number} ” τάξεις.
• Στη συνέχεια, το στοιχείο στο στοιχείο div κεντραρίζεται χρησιμοποιώντας το ' δικαιολογώ-κέντρο 'τάξη, και το ' καλώδιο ” Η κλάση δημιουργεί ένα κοντέινερ που θα περιέχει το θυγατρικό στοιχείο του div.
• Ο ' bg-{color}-{number} Η κλάση ορίζει το χρώμα φόντου του στοιχείου div.
• ΕΝΑ '

  Δημιουργείται η ετικέτα που περιέχει το περιεχόμενο κειμένου. Παρέχεται σταθερό πλάτος χρησιμοποιώντας το ' w-{number} ” τάξη.

• Τέλος, το περιεχόμενο του κειμένου του « Π ' το στοιχείο περιορίζεται σε τρεις γραμμές χρησιμοποιώντας το ' γραμμή-σφιγκτήρας-3 ” τάξη.

Παραγωγή

Μπορεί να φανεί στην έξοδο ότι το περιεχόμενο κειμένου που υπερέβη το καθορισμένο όριο των τριών γραμμών είναι κρυμμένο:

Παράδειγμα 2: Χρησιμοποιήστε την κατηγορία Line Clamp με προεπιλεγμένες καταστάσεις στο Tailwind

Το Tailwind παρέχει διάφορες προεπιλεγμένες καταστάσεις για ένα στοιχείο που μπορεί να χρησιμοποιηθεί για να κάνει τις διατάξεις σχεδίασης πιο δυναμικές. Ο προγραμματιστής μπορεί να χρησιμοποιήσει οποιαδήποτε κλάση Tailwind με αυτές τις καταστάσεις για να παρέχει την καθορισμένη ιδιότητα σχεδίασης στο στοιχείο κάθε φορά που επιτυγχάνεται αυτή η κατάσταση. Ομοίως, η κλάση 'line-clamp' μπορεί επίσης να χρησιμοποιηθεί με αυτές τις προεπιλεγμένες καταστάσεις Tailwind.

Η σύνταξη για τη χρήση της κλάσης 'line-clamp' με κατάσταση στο Tailwind δίνεται παρακάτω:

Υπάρχουν τρεις προεπιλεγμένες καταστάσεις που περιγράφονται ως εξής:

• φτερουγίζω: Είναι η κατάσταση ενός στοιχείου όταν ο χρήστης τοποθετεί τον κέρσορα του ποντικιού πάνω του.
• Συγκεντρώνω: Είναι η κατάσταση όταν το στοιχείο είναι στο επίκεντρο. Για παράδειγμα, ο χρήστης πλοηγείται στο στοιχείο πατώντας το πλήκτρο «tab».
• ενεργός: Η κατάσταση όταν το στοιχείο ενεργοποιείται από τον χρήστη.

Στην παρακάτω επίδειξη, όλα είναι πανομοιότυπα με το προηγούμενο παράδειγμα. Η μόνη διαφορά είναι ότι η κλάση σύσφιξης γραμμής παρέχεται με το ' φτερουγίζω ' κατάσταση:

Σημειώστε ότι το «

'Η τάξη παρέχεται από το ' hover:line-clamp-3 », η οποία θα περιορίσει το περιεχόμενο κειμένου σε τρεις γραμμές κάθε φορά που ο χρήστης τοποθετεί τον κέρσορα του ποντικιού πάνω από το πλαίσιο περιεχομένου.

Παραγωγή

Μπορεί να φανεί στην παρακάτω έξοδο ότι η ιδιότητα σύσφιξης γραμμής εφαρμόζεται όταν ο δρομέας του ποντικιού αιωρείται πάνω από το μπλοκ:

Παράδειγμα 3: Χρησιμοποιήστε την κλάση σφιγκτήρων γραμμής με σημεία διακοπής

Τα σημεία διακοπής είναι ερωτήματα πολυμέσων στο Tailwind που βοηθούν τους χρήστες να δημιουργήσουν μια διάταξη σχεδίασης με απόκριση. Το Tailwind παρέχει πέντε προεπιλεγμένα σημεία διακοπής με προκαθορισμένα ελάχιστα πλάτη. Ο προγραμματιστής μπορεί επίσης να χρησιμοποιήσει την κλάση σύσφιξης γραμμής με αυτά τα σημεία διακοπής.

Η σύνταξη για τη χρήση μιας κλάσης σύσφιξης γραμμής με σημεία διακοπής είναι η εξής:

Τα «προθέματα σημείων διακοπής» που αναφέρονται στην παραπάνω σύνταξη είναι τα εξής:

• sm: Αυτό το σημείο διακοπής έχει ελάχιστο πλάτος 640 px.
• md: Αυτό το σημείο διακοπής έχει ελάχιστο πλάτος 768 px.
• lg: Αυτό το σημείο διακοπής έχει ελάχιστο πλάτος 1024 px.
• xl: Αυτό το σημείο διακοπής έχει ελάχιστο πλάτος 1280 px.
• 2xl: Αυτό το σημείο διακοπής έχει ελάχιστο πλάτος 1536 px.

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

Το στοιχείο p παρέχεται με μια κλάση 'line-clamp-1' από προεπιλογή. Ωστόσο, το περιεχόμενο κειμένου στο στοιχείο 'p' θα περιοριστεί σε μία γραμμή για το ' sm 'σημείο διακοπής, δύο γραμμές για το ' md ' σημείο διακοπής και τρεις γραμμές για το ' lg 'σημείο διακοπής.

Παραγωγή

Από την έξοδο, είναι σαφές ότι η ιδιότητα line-clamp του μπλοκ κειμένου αλλάζει καθώς αλλάζει το μέγεθος της οθόνης:

Επιδείξαμε τη διαδικασία σύσφιξης κειμένου σε συγκεκριμένο αριθμό γραμμών στο Tailwind.

συμπέρασμα

Η κλάση σφιγκτήρα γραμμής στο Tailwind περιορίζει το περιεχόμενο κειμένου ενός στοιχείου στον καθορισμένο αριθμό γραμμών. Η κλάση 'lin-clamp-{number}' χρησιμοποιείται ως σύνταξη για τη σύσφιξη του κειμένου σε περιορισμένες γραμμές. Η κλάση σφιγκτήρα γραμμής μπορεί να χρησιμοποιηθεί με τα προκαθορισμένα σημεία διακοπής και τις παραλλαγές κατάστασης στο Tailwind. Αυτό το άρθρο παρέχει τη διαδικασία για τη σύσφιξη του κειμένου σε έναν καθορισμένο αριθμό γραμμών.