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

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

Μπορείτε να δημιουργήσετε αυτό το σχέδιο χρησιμοποιώντας έναν συνδυασμό CSS και JavaScript. Αλλά μπορείτε επίσης να το κάνετε χρησιμοποιώντας μόνο το CSS. Ανακαλύψτε δύο τρόπους περιορισμού του κειμένου σε ένα πλαίσιο και πώς μπορείτε να δημιουργήσετε ένα κουμπί δυναμικής επέκτασης χρησιμοποιώντας μόνο CSS.

Η τεχνική του Webkit

Δημιουργήστε έναν κενό φάκελο και επεξεργαστείτε δύο αρχεία μέσα σε αυτόν: index.html και στυλ.css. μεσα στην index.html αρχείο, δημιουργήστε έναν σκελετό HTML:

html>
<htmllang="en">
<κεφάλι>
<τίτλος>Εγγραφοτίτλος>
<Σύνδεσμοςσχετ="φύλλο στυλ"href="style.css">
κεφάλι>
<σώμα>
σώμα>
html>

Ένας σύνδεσμος στο τμήμα, στο

στυλ.css αρχείο, διασφαλίζει ότι κάθε CSS που προσθέτετε σε αυτό το αρχείο θα ισχύει σε αυτήν τη σελίδα. Στη συνέχεια, επικολλήστε την ακόλουθη σήμανση HTML μέσα στο ετικέτες σε index.html:

<Ενότητατάξη="ομάδα καρτών">
<άρθροτάξη="κάρτα">
<h2>Άρθρο 1h2>
<Πτάξη="κείμενο αποκοπής">
 Το κείμενο 300 λέξεων πηγαίνει εδώ
Π>
<εισαγωγήτύπος="πλαίσιο ελέγχου"τάξη="expand-btn">
άρθρο>
<άρθροτάξη="κάρτα">
<h2>Άρθρο 2h2>
<Πτάξη="κείμενο αποκοπής">
 Το κείμενο 200 λέξεων πηγαίνει εδώ
Π>
<εισαγωγήτύπος="πλαίσιο ελέγχου"τάξη="expand-btn">
άρθρο>
<άρθροτάξη="κάρτα">
<h2>Άρθρο 1h2>
<Πτάξη="κείμενο αποκοπής">
 Το κείμενο 100 λέξεων πηγαίνει εδώ
Π>
<εισαγωγήτύπος="πλαίσιο ελέγχου"τάξη="expand-btn">
άρθρο>
Ενότητα>

Η δομή αυτού του HTML είναι απλή, αλλά εξακολουθεί να χρησιμοποιείται σημασιολογική σήμανση για προσβασιμότητα. Ένα στοιχείο ενότητας περιέχει τρία στοιχεία άρθρου. Κάθε άρθρο περιλαμβάνει μια επικεφαλίδα, μια παράγραφο και ένα στοιχείο εισαγωγής. Θα χρησιμοποιήσετε CSS για να κάνετε στυλ κάθε ενότητας άρθρου σε μια κάρτα.

Στο μεταξύ, η σελίδα σας θα μοιάζει με αυτό:

Από την παραπάνω εικόνα, μπορείτε να δείτε διαφορετικά μήκη κειμένου σε κάθε παράγραφο. 300 λέξεις στην πρώτη, 200 λέξεις στη δεύτερη και 100 στην τρίτη.

Το επόμενο βήμα είναι να ξεκινήσετε το στυλ της σελίδας προσθέτοντας CSS στο στυλ.css αρχείο. Ξεκινήστε επαναφέροντας το περίγραμμα στο έγγραφο και δίνοντας στο σώμα ένα λευκό χρώμα φόντου:

*, *::πριν, *::μετά {
μέγεθος κουτιού: περίγραμμα-κουτί;
}
σώμα {
Ιστορικό: #f3f3f3;
ξεχείλισμα: κρυμμένος;
}

Στη συνέχεια, μετατρέψτε το στοιχείο με την κλάση ομάδας καρτών σε ένα πλέγμα κοντέινερ με τρεις στήλες. Κάθε ενότητα άρθρου καταλαμβάνει μια στήλη:

.κάρτα-ομάδα {
απεικόνιση: πλέγμα;
πλέγμα-πρότυπο-στήλες: επαναλαμβάνω(3, 1fr);
χάσμα: .5 εκμ;
στοίχιση-στοιχεία: flex-start;
}

Δώστε στυλ κάθε ενότητας άρθρου ως κάρτα με λευκό φόντο και μαύρο, ελαφρώς στρογγυλό περίγραμμα:

.κάρτα {
Ιστορικό: άσπρο;
υλικό παραγεμίσματος: 1rem;
σύνορο: 1pxστερεόςμαύρος;
σύνορα-ακτίνα: .25 εκ;
}

Τέλος, προσθέστε μερικά περιθώρια:

h2, Π {
περιθώριο: 0;
}
h2 {
περιθώριο-κάτω: 1rem;
}

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

Το επόμενο βήμα είναι να μειώσετε τον αριθμό των γραμμών για κάθε κείμενο σε 3. Εδώ είναι το CSS για αυτό:

.κείμενο αποκοπής {
--max-lines: 3; 
ξεχείλισμα: κρυμμένος;

απεικόνιση: -webkit-box; 
-webkit-box-orient: κατακόρυφος;
-webkit-line-clamp: var(--max-lines);
}

Ξεκινήστε με τη ρύθμιση μια μεταβλητή CSS, μέγ. γραμμές, έως 3 και απόκρυψη υπερχείλισης περιεχομένου. Στη συνέχεια, ρυθμίστε την οθόνη σε -webkit-box και σφίξτε τη γραμμή στο 3.

Η παρακάτω εικόνα δείχνει το αποτέλεσμα. Κάθε κάρτα εμφανίζει μια έλλειψη στην τρίτη γραμμή κειμένου:

Αυτή η τεχνική μπορεί να είναι αρκετά δύσκολο να επιτευχθεί. Εάν παραλείψετε οποιαδήποτε ιδιοκτησία, τότε όλα θα σπάσουν. Ένα άλλο μειονέκτημα είναι ότι δεν μπορείτε να χρησιμοποιήσετε μια ιδιότητα εμφάνισης εκτός από --webkit-box. Για παράδειγμα, μπορεί να θέλετε χρησιμοποιήστε Grid ή Flexbox. Για αυτούς τους λόγους, η παρακάτω τεχνική είναι καλύτερη.

Μια πιο ευέλικτη προσέγγιση για τον περιορισμό του αριθμού των γραμμών στο κείμενο

Αυτή η τεχνική σας επιτρέπει να κάνετε το ίδιο πράγμα με την προσέγγιση webkit, με τα ίδια αποτελέσματα. Αλλά η μεγάλη διαφορά είναι ότι έχετε τόνους ευελιξίας επειδή ορίζετε μόνοι σας το ύψος. Επιπλέον, μπορείτε να χρησιμοποιήσετε οποιαδήποτε ιδιότητα προβολής ή οποιαδήποτε επιλογή στυλ προτιμάτε.

Για να ξεκινήσετε, αντικαταστήστε το μπλοκ CSS για .κείμενο αποκοπής με αυτό:

.κείμενο αποκοπής {
--max-lines: 5;
--ύψος γραμμής: 1.4;
ύψος: calc(var(--max-lines) * 1em * var(--ύψος γραμμής));
ύψος γραμμής: var(--ύψος γραμμής);
θέση: συγγενής;
}

Ο καθορισμός ενός ύψους γραμμής είναι σημαντικός γιατί πρέπει να το λάβετε υπόψη κατά τον προσδιορισμό του ύψους σας. Για να πάρετε το ύψος, πολλαπλασιάζετε το ύψος της γραμμής με το μέγεθος της γραμματοσειράς σας και τον αριθμό των γραμμών.

Προσθέτουμε θέση: σχετική ιδιότητα επειδή το χρειαζόμαστε για να προσθέσουμε το εφέ ξεθωριάσματος. Προσθέστε το ακόλουθο CSS για να ολοκληρώσετε το εφέ:

.κείμενο αποκοπής::πριν {
περιεχόμενο: "";
θέση: απόλυτος;
ύψος: calc(2em * var(--ύψος γραμμής));
πλάτος: 100%;
κάτω μέρος: 0;
δείκτες-γεγονότα: κανένας;
Ιστορικό: γραμμική κλίση(προς τηνκάτω μέρος, διαφανής, άσπρο);
}

Το παραπάνω CSS θολώνει την τελευταία γραμμή κειμένου σε κάθε κάρτα. Μπορείτε να επιτύχετε ένα αποτέλεσμα ξεθώριασμα χρησιμοποιώντας το Ιστορικό ιδιοκτησία και μια κλίση. Πρέπει να ρυθμίσετε δείκτες-γεγονότα προς την κανένας για να διασφαλίσετε ότι το στοιχείο δεν είναι επιλέξιμο.

Ιδού το αποτέλεσμα:

Αυτή η τεχνική πέτυχε το ίδιο αποτέλεσμα με την προηγούμενη (συν το θάμπωμα στο τέλος). Αλλά έχετε μεγαλύτερη ευελιξία για να χρησιμοποιήσετε άλλα είδη διατάξεων και σχεδίων.

Προσθήκη κουμπιού δυναμικής επέκτασης και σύμπτυξης

Η προσθήκη ενός κουμπιού επέκτασης/σύμπτυξης κάνει τις κάρτες πιο ρεαλιστικές και διαδραστικές. Με αυτό το μοτίβο, επεκτείνετε το περιεχόμενο κάνοντας κλικ στο Επεκτείνουν κουμπί, μετά το οποίο το κείμενο αλλάζει σε Κατάρρευση. Έτσι, το κείμενο του κουμπιού αλλάζει μεταξύ "Ανάπτυξη" και "Σύμπτυξη" καθώς κάνετε κλικ σε αυτό. Επιπλέον, το υπόλοιπο περιεχόμενο εμφανίζεται και κρύβεται σε κάθε αντίστοιχη κατάσταση.

Έχετε ήδη ορίσει ένα εισαγωγή στοιχείο στο HTML σας. Αυτό το στοιχείο θα χρησιμεύσει ως το κουμπί σας. Για να κάνετε στυλ σε αυτήν την είσοδο σε κουμπί, συμπεριλάβετε το ακόλουθο CSS στο φύλλο στυλ σας:

.expand-btn {
εμφάνιση: κανένας;
σύνορο: 1pxστερεόςμαύρος;
υλικό παραγεμίσματος: .5 εκ;
σύνορα-ακτίνα: .25 εκ;
δρομέας: δείκτης;
περιθώριο-κορυφή: 1rem;
}

Όταν τοποθετείτε το δείκτη του ποντικιού στο κουμπί, θέλετε να αλλάξετε το χρώμα του φόντου:

.expand-btn:φτερουγίζω {
χρώμα του φόντου: #cccc;
}

Τώρα το CSS για την εναλλαγή του κειμένου όταν ελέγχεται η εισαγωγή:

.expand-btn::πριν {
περιεχόμενο: "Επεκτείνουν"
}
.expand-btn:τετραγωνισμένος::πριν {
περιεχόμενο: "Κατάρρευση"
}

Τώρα, όταν κάνετε κλικ στο κουμπί/εισαγωγή, το κείμενο πηγαίνει από Επεκτείνουν προς την Κατάρρευση. Αλλά το ίδιο το περιεχόμενο δεν θα επεκταθεί ακόμα. Για να το κάνετε αυτό όταν κάνετε κλικ στο κουμπί, προσθέστε το ακόλουθο CSS:

.κείμενο αποκοπής:has(+.expand-btn:τετραγωνισμένος) {
ύψος: αυτο;
}

Αυτό το παράδειγμα χρησιμοποιεί το has() Επιλογέας CSS για στόχευση του στοιχείου. Με αυτόν τον κωδικό, λέτε ότι εάν η περιοχή κειμένου αποκοπής έχει ένα επιλεγμένο κουμπί επέκτασης, το ύψος της κάρτας θα πρέπει να είναι αυτο (που το διευρύνει).

Ιδού το αποτέλεσμα:

Άλλες συμβουλές και κόλπα CSS για να μάθετε

Αυτό το άρθρο παρουσίασε δύο διαφορετικές μεθόδους για τον περιορισμό του αριθμού των γραμμών σε ένα πλαίσιο χρησιμοποιώντας CSS. Προσθέσαμε ακόμη και ένα κουμπί για επέκταση/σύμπτυξη του περιεχομένου χωρίς να γράψουμε ούτε μια γραμμή JavaScript.

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