Η overflow-wrapιδιότητα στο CSS σας επιτρέπει να καθορίσετε ότι το πρόγραμμα περιήγησης μπορεί να σπάσει μια γραμμή κειμένου μέσα στο στοχευμένο στοιχείο σε πολλές γραμμές σε ένα κατά τα άλλα άθραυστο μέρος. Αυτό βοηθά να αποφευχθεί μια ασυνήθιστα μεγάλη σειρά κειμένου που προκαλεί προβλήματα διάταξης λόγω υπερχείλισης.
.example ( overflow-wrap: break-word; )Αξίες
normal: η προεπιλεγμένη. Το πρόγραμμα περιήγησης θα σπάσει τις γραμμές σύμφωνα με τους κανονικούς κανόνες αλλαγής γραμμών. Οι λέξεις ή οι σπασμένες συμβολοσειρές δεν θα σπάσουν, ακόμη και αν ξεχειλίσουν το δοχείο.break-word: λέξεις ή συμβολοσειρές χαρακτήρων που είναι πολύ μεγάλοι για να χωρέσουν μέσα στο κοντέινερ τους, θα σπάσουν σε αυθαίρετο μέρος για να αναγκάσουν μια αλλαγή γραμμής. Δεν θα εισαχθεί χαρακτήρας ενωτικού, ακόμη και αν χρησιμοποιείται ηhyphensιδιότητα.inherit: το στοχευμένο στοιχείο πρέπει να κληρονομήσει την τιμή τηςoverflow-wrapιδιότητας που ορίζεται στον άμεσο γονέα της.
Η παρακάτω επίδειξη διαθέτει ένα κουμπί εναλλαγής που σας επιτρέπει να κάνετε εναλλαγή μεταξύ normalκαι break-word.
Δείτε το demo Pen overflow-wrap / word-wrap από τον Louis Lazaris (@ impressivewebs) στο CodePen.
Για να δείξει το πρόβλημα που overflow-wrapπροσπαθεί να λύσει, το demo χρησιμοποιεί μια ασυνήθιστα μεγάλη λέξη μέσα σε ένα σχετικά μικρό κοντέινερ. Όταν ενεργοποιείτε break-word, η λέξη σπάει για να φιλοξενήσει τον μικρό διαθέσιμο χώρο, σαν η λέξη να είναι πολλές λέξεις.
Μια σειρά χαρακτήρων διαστήματος που δεν σπάζουν ( ) θα αντιμετωπίζονται με τον ίδιο τρόπο και θα σπάσει επίσης σε κατάλληλο σημείο.
overflow-wrapείναι χρήσιμο όταν εφαρμόζεται σε στοιχεία που περιέχουν μη τροποποιημένο περιεχόμενο που δημιουργείται από χρήστες (όπως ενότητες σχολίων). Αυτό μπορεί να αποτρέψει τις μεγάλες διευθύνσεις URL και άλλες αδιάσπαστες συμβολοσειρές κειμένου (π.χ. βανδαλισμός) από το σπάσιμο της διάταξης μιας ιστοσελίδας.
Ομοιότητες με το word-breakακίνητο
overflow-wrapκαι word-breakσυμπεριφέρονται πολύ παρόμοια και μπορούν να χρησιμοποιηθούν για την επίλυση παρόμοιων προβλημάτων. Μια βασική περίληψη της διαφοράς, όπως εξηγείται στην προδιαγραφή CSS είναι:
overflow-wrapχρησιμοποιείται γενικά για την αποφυγή προβλημάτων με μεγάλες χορδές που προκαλούν σπασμένες διατάξεις λόγω του κειμένου που ρέει έξω από ένα δοχείο.word-breakκαθορίζει ευκαιρίες μαλακής αναδίπλωσης μεταξύ γραμμάτων που σχετίζονται συνήθως με γλώσσες όπως τα κινέζικα, τα ιαπωνικά και τα κορεατικά (CJK).
Αφού περιγράψει παραδείγματα για το πώς word-breakμπορεί να χρησιμοποιηθεί σε περιεχόμενο CJK, η προδιαγραφή λέει: "Για να ενεργοποιήσετε πρόσθετες ευκαιρίες διακοπής μόνο σε περίπτωση υπερχείλισης, δείτε overflow-wrap".
Από αυτό, μπορούμε να υποθέσουμε ότι word-breakχρησιμοποιείται καλύτερα με μη αγγλικό περιεχόμενο που απαιτεί συγκεκριμένους κανόνες κατά λέξη και που μπορεί να διασταυρωθεί με αγγλικό περιεχόμενο, ενώ overflow-wrapθα πρέπει να χρησιμοποιείται για την αποφυγή σπασμένων διατάξεων λόγω μεγάλων χορδών, ανεξάρτητα από τη γλώσσα που χρησιμοποιείται .
Η ιστορική word-wrapιδιοκτησία
overflow-wrapείναι το τυπικό όνομα για τον προκάτοχό του, την word-wrapιδιότητα. word-wrapήταν αρχικά μια ιδιόκτητη δυνατότητα μόνο του Internet Explorer που τελικά υποστηρίχθηκε σε όλα τα προγράμματα περιήγησης, παρόλο που δεν ήταν τυπική.
word-wrapαποδέχεται τις ίδιες τιμές όπως overflow-wrapκαι συμπεριφέρεται με τον ίδιο τρόπο. Σύμφωνα με τις προδιαγραφές, τα προγράμματα περιήγησης «πρέπει να αντιμετωπίζουν word-wrapως ένα εναλλακτικό όνομα για το overflow-wrapακίνητο, σαν να ήταν στενό του overflow-wrap«. Επίσης, όλοι οι πράκτορες χρηστών πρέπει να υποστηρίζουν word-wrapεπ 'αόριστον, για λόγους παλαιού τύπου.
Και οι δύο overflow-wrapκαι word-wrapθα περάσουν επικύρωση CSS, εφόσον ο επικυρωτής έχει ρυθμιστεί για δοκιμή έναντι CSS3 ή υψηλότερης (επί του παρόντος η προεπιλογή).
Σχετιζομαι με
- διάλειμμα λέξεων
- παύλες
- λευκός χώρος
- Χειρισμός μεγάλων λέξεων και διευθύνσεων URL
Περισσότερες πληροφορίες
- Word-Wrap: Μια ιδιότητα CSS3 που λειτουργεί σε κάθε πρόγραμμα περιήγησης
- Περιτύλιξη υπερχείλισης στο W3C
- Συζήτηση για Stack Overflow on
word-breakvs.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 |
Η "μερική" υποστήριξη που αναφέρεται παραπάνω οφείλεται σε παλαιότερα προγράμματα περιήγησης που υποστηρίζουν word-wrapαλλά όχι overflow-wrap. Η χρήση και των δύο μπορεί να εξασφαλίσει συμβατότητα προς τα πίσω.
Η πρόχειρη έκδοση του συντάκτη της προδιαγραφής W3C περιλαμβάνει μια νέα τιμή που ονομάζεται break-spacesπου ασχολείται με αλληλουχίες χαρακτήρων λευκού διαστήματος. Δεν υπάρχει γνωστή υποστήριξη προγράμματος περιήγησης για αυτήν τη δυνατότητα και δεν περιλαμβάνεται στην πρόχειρη έκδοση της προδιαγραφής.