Υπάρχουν φορές που μια πολύ μεγάλη συμβολοσειρά κειμένου μπορεί να ξεχειλίσει το κοντέινερ μιας διάταξης.
Για παράδειγμα:
Εδώ είναι η κουτάλα:
overflow-wrap: break-word;βεβαιωθείτε ότι η μακριά χορδή θα τυλίξει και δεν θα σπάσει έξω από το δοχείο. Μπορείτε επίσης να το χρησιμοποιήσετε,word-wrapκαθώς όπως λέει η προδιαγραφή, είναι κυριολεκτικά απλά εναλλακτικά ονόματα μεταξύ τους. Ορισμένα προγράμματα περιήγησης υποστηρίζουν το ένα και όχι το άλλο. Το Firefox (δοκιμασμένο v43) υποστηρίζει μόνοword-wrap. Το Blink (δοκιμασμένο Chrome v45) θα πάρει ένα.- Με τη
overflow-wrapχρήση από μόνη της, οι λέξεις θα σπάσουν κάπου οπουδήποτε χρειάζονται. Εάν υπάρχει ένας χαρακτήρας «αποδεκτού διαλείμματος» (όπως μια κυριολεκτική παύλα, για παράδειγμα), θα σπάσει εκεί, διαφορετικά θα κάνει ό, τι πρέπει να κάνει. - Μπορείτε επίσης να το χρησιμοποιήσετε
hyphens, γιατί τότε θα προσπαθήσει να προσθέσει μια παύλα που θα σπάσει εάν το υποστηρίζει το πρόγραμμα περιήγησης (το Blink δεν τη στιγμή της γραφής, το κάνει ο Firefox). word-break: break-all;είναι να πείτε στο πρόγραμμα περιήγησης ότι είναι εντάξει να σπάσει τη λέξη όπου χρειάζεται. Παρόλο που το κάνει αυτό έτσι κι αλλιώς δεν είμαι σίγουρος σε ποιες περιπτώσεις είναι 100% απαραίτητο.
Εάν θέλετε να είστε πιο χειροκίνητοι με παύλες, μπορείτε να τους προτείνετε στη σήμανσή σας. Δείτε περισσότερα στη σελίδα MDN.
Υποστήριξη προγράμματος περιήγησης
Για word-break:
Αυτά τα δεδομένα υποστήριξης του προγράμματος περιήγησης προέρχονται από την Caniuse, η οποία έχει περισσότερες λεπτομέρειες. Ένας αριθμός υποδεικνύει ότι το πρόγραμμα περιήγησης υποστηρίζει τη λειτουργία σε αυτήν την έκδοση και νεότερη.
Επιφάνεια εργασίας
| Χρώμιο | Firefox | ΙΕ | Ακρη | Σαφάρι |
|---|---|---|---|---|
| 44 | 15 | 5.5 | 12 | 9 |
Κινητό / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 9.0-9.2 |
Για hypens:
Αυτά τα δεδομένα υποστήριξης του προγράμματος περιήγησης προέρχονται από την Caniuse, η οποία έχει περισσότερες λεπτομέρειες. Ένας αριθμός υποδεικνύει ότι το πρόγραμμα περιήγησης υποστηρίζει τη λειτουργία σε αυτήν την έκδοση και νεότερη.
Επιφάνεια εργασίας
| Χρώμιο | Firefox | ΙΕ | Ακρη | Σαφάρι |
|---|---|---|---|---|
| 88 | 6 * | 10 * | 12 * | 5.1 * |
Κινητό / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 4.2-4.3 * |
Για overflow-wrap:
Αυτά τα δεδομένα υποστήριξης του προγράμματος περιήγησης προέρχονται από την Caniuse, η οποία έχει περισσότερες λεπτομέρειες. Ένας αριθμός υποδεικνύει ότι το πρόγραμμα περιήγησης υποστηρίζει τη λειτουργία σε αυτήν την έκδοση και νεότερη.
Επιφάνεια εργασίας
| Χρώμιο | Firefox | ΙΕ | Ακρη | Σαφάρι |
|---|---|---|---|---|
| 23 | 49 | 11 | 18 | 6.1 |
Κινητό / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4 | 7.0-7.1 |
Για text-overflow:
Αυτά τα δεδομένα υποστήριξης του προγράμματος περιήγησης προέρχονται από την Caniuse, η οποία έχει περισσότερες λεπτομέρειες. Ένας αριθμός υποδεικνύει ότι το πρόγραμμα περιήγησης υποστηρίζει τη λειτουργία σε αυτήν την έκδοση και νεότερη.
Επιφάνεια εργασίας
| Χρώμιο | Firefox | ΙΕ | Ακρη | Σαφάρι |
|---|---|---|---|---|
| 4 | 7 | 6 | 12 | 3.1 |
Κινητό / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 2.1 | 3.2 |
Αποτροπή υπερχείλισης με έλλειψη
Μια άλλη προσέγγιση που πρέπει να λάβετε υπόψη είναι η περικοπή του κειμένου εντελώς και η προσθήκη ελλείψεων όπου η συμβολοσειρά κειμένου χτυπά το κοντέινερ:
.ellipses ( overflow: hidden; white-space: nowrap; text-overflow: ellipsis; )Αυτό το ωραίο πράγμα για τη χρήση text-overflowείναι ότι υποστηρίζεται παγκοσμίως.
Παραδείγματα
Ανατρέξτε στις λέξεις-κλειδιά του Hyphenate Long Words από CSS-Tricks (@ css-tricks) στο CodePen.
Δείτε το Pen Ellipses by CSS-Tricks (@ css-tricks) στο CodePen.
Δείτε το Pen Figuring Out Line Wrapping από τον Chris Coyier (@chriscoyier) στο CodePen.
Περισσότεροι πόροι
- Michael Scharnagl: Αντιμετώπιση μεγάλων λέξεων στο CSS
- Kenneth Auchenberg: Αναδίπλωση λέξεων / συλλαβισμός χρησιμοποιώντας CSS
- MDN: αναδίπλωση λέξεων, διάλειμμα λέξεων, παύλες
- Προδιαγραφή: CSS Text Level 3
Για την κλίση SCSS
Αυτά τείνουν να είναι το είδος των πραγμάτων που πασπαλίζετε σε κώδικα όπου χρειάζεται, οπότε δημιουργούν ωραία @mixins:
@mixin word-wrap() ( overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; word-break: break-all; word-break: break-word; -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; )@mixin ellipsis() ( overflow: hidden; white-space: nowrap; text-overflow: ellipsis; )