Διάλειμμα λέξεων - CSS-Κόλπα

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

Στο παρακάτω παράδειγμα μπορούμε να κάνουμε τα word-breakμεταξύ γράμματα αντί:

p ( word-break: break-all; )

Εάν στη συνέχεια ορίσουμε το πλάτος του κειμένου σε ένα em, η λέξη θα σπάσει με κάθε γράμμα:

Δείτε το κείμενο "Ρύθμιση στυλό" κάθετα με διάλυση λέξεων από CSS-Tricks (@ css-tricks) στο CodePen.

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

Δείτε τους συνδέσμους Fixing Pen με διάλυση λέξεων από CSS-Tricks (@ css-tricks) στο CodePen.

Αξίες

normal: χρησιμοποιήστε τους προεπιλεγμένους κανόνες για το σπάσιμο λέξεων.
break-all: οποιαδήποτε λέξη / γράμμα μπορεί να σπάσει στην επόμενη γραμμή.
keep-all: για Κινέζικα, Ιαπωνικά και Κορεατικά οι λέξεις κειμένου δεν είναι σπασμένες Διαφορετικά αυτό είναι το ίδιο με normal.

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

Η πλήρης χρήση, με τα απαιτούμενα προθέματα προμηθευτών, είναι:

 -ms-word-break: break-all; word-break: break-all; /* Non standard for WebKit */ word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto;

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

Σχετιζομαι με

υπερχείλιση-περιτύλιγμα
παύλες
λευκός χώρος
Χειρισμός μεγάλων λέξεων και διευθύνσεων URL

Υποστήριξη προγράμματος περιήγησης

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