Υπερχείλιση κειμένου - CSS-Κόλπα

Η text-overflowιδιότητα στο CSS ασχολείται με καταστάσεις όπου το κείμενο περικόπτεται όταν ξεχειλίζει το πλαίσιο του στοιχείου. Μπορεί να περικοπεί (δηλαδή να αποκοπεί, να κρυφτεί), να εμφανιστεί μια έλλειψη ('…', Unicode Range Value U + 2026) ή να εμφανιστεί μια συμβολοσειρά καθορισμένη από συγγραφέα (δεν υπάρχει τρέχουσα υποστήριξη προγράμματος περιήγησης για συμβολοσειρές που καθορίζονται από τον συγγραφέα).

.ellipsis ( text-overflow: ellipsis; /* Required for text-overflow to do anything */ white-space: nowrap; overflow: hidden; )

Σημειώστε ότι text-overflowσυμβαίνει μόνο όταν η overflowιδιότητα του κοντέινερ έχει την τιμή hidden, scrollή autoκαι white-space: nowrap;.

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

Η παρακάτω επίδειξη εμφανίζει τη συμπεριφορά της text-overflowιδιότητας, συμπεριλαμβανομένων όλων των πιθανών τιμών. Η υποστήριξη του προγράμματος περιήγησης ποικίλλει!

Δείτε αυτό το στυλό!

Ρύθμιση overflowγια scrollή autoθα εμφανιστεί κύλισης για να αποκαλύψει το πρόσθετο κείμενο, ενώ hiddenδεν θα. Το κρυφό κείμενο μπορεί να επιλεγεί επιλέγοντας τις ελλείψεις.

Παλιά πράγματα

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

Υπάρχει μια σύνταξη δύο τιμών, π.χ. text-overflow: ellipsis ellipsis;που θα ελέγχει την υπερχείλιση στην αριστερή και τη δεξιά πλευρά του ίδιου κοντέινερ. Δεν είμαι σίγουρος πώς θα ήταν δυνατόν να επιτευχθεί. Ίσως κεντραρισμένο κείμενο σε ένα πολύ μικρό κοντέινερ; Η νέα προδιαγραφή λέει ότι αυτό, καθώς και ο ορισμός μιας συμβολοσειράς, είναι "σε κίνδυνο".

Δεν είμαι σίγουρος από πού ellipsis-wordπροήλθε. Δεν υπάρχει στις προδιαγραφές ή σε οποιαδήποτε άλλη τεκμηρίωση εκτός από το WebPlatform.org.

Η text-overflowιδιότητα ήταν συντομογραφία για το συνδυασμό text-overflow-modeκαι text-overflow-ellipsis, αλλά όχι πια, και αυτές οι ξεχωριστές ιδιότητες δεν υπάρχουν.