Πώς να αλλάξετε την προεπιλεγμένη περιτύλιξη κειμένου με HTML και CSS

Σε αντίθεση με το χαρτί, οι ιστοσελίδες μπορούν σχεδόν άπειρα εκτείνονται πλαγίως. Όσο εντυπωσιακό είναι αυτό, δεν είναι κάτι που πραγματικά χρειαζόμαστε κατά την ανάγνωση. Τα προγράμματα περιήγησης αναδιπλώνουν κείμενο ανάλογα με το πλάτος του δοχείου κειμένου και το πλάτος της οθόνης έτσι ώστε να μπορούμε να δούμε όλο το κείμενο χωρίς να χρειάζεται να μετακινηθούμε προς τα πλάγια πολύ (μόνο προς τα κάτω).

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

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

Πότε να αλλάξετε την προεπιλεγμένη περιτύλιξη κειμένου

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

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

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

Υπάρχει ένας σωστός αριθμός ιδιοτήτων CSS (και HTML στοιχεία!) Που μπορούν ελέγξτε το περιτύλιγμα και τα σημεία διακοπής και επίσης καθορίστε τον τρόπο επεξεργασίας των διαστημάτων και των διακοπών γραμμής πριν την αναδίπλωση.

Μαλακές περιτυλίξεις και μαλακά σπασμένα περιβλήματα

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

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

Λευκό χώρο

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

Ωστόσο, το λευκό-χώρο η ιδιοκτησία είναι κάτι περισσότερο από απλή περιτύλιξη. Πρώτα απ 'όλα, τι είναι τα κενά; Είναι ένα σύνολο χαρακτήρων διαστήματος. Κάθε χώρος στο σετ ποικίλλουν ο ένας από τον άλλο σε μήκος, κατεύθυνση ή και στα δύο.

Μια τυπική ενιαίο χαρακτήρα οριζόντιου διαστήματος είναι αυτό που προσθέτουμε πατώντας το πλήκτρο διαστήματος. Το πλήκτρο Tab προσθέτει επίσης a παρόμοιο διάστημα αλλά ένα μεγαλύτερο μήκος. Το πλήκτρο Enter προσθέτει α κατακόρυφο χώρο για να ξεκινήσει μια νέα γραμμή, και στο HTML προσθέτει a ενιαίο άθραυστο χώρο σε ιστοσελίδες. Έτσι, υπάρχουν πολλοί τύποι χώρων που συνθέτουν “κενό διάστημα”.

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

Και, είναι ακριβώς αυτές οι ενέργειες του προγράμματος περιήγησης με τις οποίες μπορούμε να ελέγξουμε λευκό-χώρο. Σημειώστε ότι το λευκό-χώρο η ιδιοκτησία δεν επηρεάζει όλα τα είδη χώρου, μόνο οι πιο συχνές όπως ο κανονικός οριζόντιος χώρος, ο χώρος των καρτελών και οι τροφοδοσίες γραμμής.

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

 
 ΕΝΑ¢Â ?? ?? Γεια σας. ΕΝΑ¢Â ?? ?? Γεια σας. ΕΝΑ¢Â ?? ?? Γεια σας¢Â ?? ?? Γεια σας. ΕΝΑ¢Â ?? ?? Γεια σας. ΕΝΑ¢Â ?? ?? Γεια σας. ΕΝΑ¢Â ?? ?? Γεια σας. ΕΝΑ¢Â ?? ?? Γεια σας. ΕΝΑ¢Â ?? ?? Γεια σας. ΕΝΑ¢Â ?? ?? Γεια σας. ΕΝΑ¢Â ?? ?? Γεια σας. ΕΝΑ¢Â ?? ?? Γεια σας. ΕΝΑ¢Â ?? ?? Γεια σας. ΕΝΑ¢Â ?? ?? Γεια σας. ΕΝΑ¢Â ?? ?? Γεια σας. ΕΝΑ¢Â ?? ?? Γεια σας. ΕΝΑ¢Â ?? ?? Γεια σας. ΕΝΑ¢Â ?? ?? Γεια σας. ΕΝΑ¢Â ?? ?? Γεια σας. ΕΝΑ¢Â ?? ?? Γεια σας. ΕΝΑ¢Â ?? ?? Γεια σας. ΕΝΑ¢Â ?? ?? Γεια σας. ΕΝΑ¢Â ?? ?? Γεια σας. ΕΝΑ¢Â ?? ?? Γεια σας. ΕΝΑ¢Â ?? ?? Γεια σας. ΕΝΑ¢Â ?? ?? Γεια σας. ΕΝΑ¢Â ?? ?? γεια σας. 

 .textContainer πλάτος: 500px; ύψος: 320px;  

Μετά την εφαρμογή λευκό-διάστημα: τώρα; , η περιτύλιξη του κειμένου αλλάζει με τον ακόλουθο τρόπο:

 .textContainer / * ... * / white-space: nowrap;  

ο προ αξία του λευκό-χώρο διατηρεί όλους τους λευκούς χώρους και εμποδίζει την περιτύλιξη του κειμένου:

 .textContainer / * ... * / white-space: pre;  

ο προ-περιτυλίγματος αξία του λευκό-χώρο διατηρεί όλους τους λευκούς χώρους και αναδιπλώνει το κείμενο:

 .textContainer / * ... * / white-space: προ-περιτύλιγμα;  

Τέλος, το προ-γραμμής αξία του λευκό-χώρο διατηρεί τους κάθετους λευκούς χώρους όπως νέες γραμμές και αναδιπλώνει το κείμενο:

 .textContainer / * ... * / λευκό-διάστημα: προ-γραμμή;  

Διαλείμματα λέξης

Μια άλλη σημαντική ιδιότητα CSS που πρέπει να γνωρίζετε για τον έλεγχο του τυλιγμένου κειμένου είναι λέξη-σπάσιμο. Μπορείτε να δείτε σε όλα τα παραπάνω screenshots το πρόγραμμα περιήγησης περιτύλιξε το κείμενο πριν από τη λέξη “γεια σας” στη δεξιά πλευρά, πέρα ​​από την οποία το υπερχείλιση κειμένου. Το πρόγραμμα περιήγησης δεν έσπασε τη λέξη.

Ωστόσο, αν εσείς πρέπει επιτρέψτε τη σπάσιμο των γραμμάτων με μια λέξη έτσι ώστε το κείμενο να φαίνεται ακόμα και στη σωστή πλευρά που πρέπει να χρησιμοποιήσετε break-all τιμή για το λέξη-σπάσιμο ιδιοκτησία:

 .textContainer / * ... * / word-break: break-all;  

ο λέξη-σπάσιμο Η ιδιοκτησία έχει και μια τρίτη αξία break-all και κανονικός (που ανήκουν στην προεπιλεγμένη διακοπή γραμμής). ο κρατήστε όλα αξία δεν επιτρέπει το σπάσιμο των λέξεων.

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

Για παράδειγμα, το γράμματα σε κορεατικά λόγια, αρχικά σπασμένα για περιτύλιξη, διατηρούνται μαζί όταν ο λευκό-διάστημα: κρατήστε-όλα? Ο κανόνας καθορίζεται.

ΕΝΑ¬Â  ¸ΕΝΑªΕΝΑ³Â ?? à «Â¥ΕΝΑ¼ Ã-Â-Â¥Ã- ??  ?? à «Â ??  ?? Ã- ??  ??, ì          ¬ΕΝΑ½Â             ¡ΕΝΑ?? Ã- ??  ?? ìÂ? Â-ì ??  ?? ì  ¤. ΕΝΑ¬Â   10     ΕΝΑ¬Â          ¬ΕΝΑ½Â ?? à «Â ??  ?? ΕΝΑªΕΝΑµÂ-ì  ?? Ã- ??  ?? ì ??  ?? ê °  ?? 1997à «Â ...  ?? 3α¬Â ?? ?? 10α¬Â  ¼à «Â¶Â          12ì  ¼ΕΝΑªΕΝΑ¹Â ??¬ΕΝΑ§ΕΝΑ?? à «Â ??  ... ì  ¼ΕΝΑ¬Â ?? ?? à «Â§Â ??¬Â  ¸ΕΝΑ¬ΕΝΑ¦Â ??¬Â   ¬ ?? ?? ΕΝΑ¬Â-´à «Â¦ΕΝΑ½Ã «Â         ¤. ΕΝΑ¬ΕΝΑ§Â ??ªΕΝΑ¸ΕΝΑ?? à «Â ±  ± ë ¡         ¬Â? Â-ì ??  ?? ì  ¤. ΕΝΑ¬Â  ´ Ã- ??  ?? ì ??  ?? ì   ¬          ?? ΕΝΑ¬Â   ªΕΝΑ³ΕΝΑ?? ΕΝΑ¬Â           ¬ ?? ?? ΕΝΑ¬Â      ¬ΕΝΑ¸ΕΝΑªÂ         ¤ΕΝΑ¬Â  ´ Ã-Â? ¨ΕΝΑªÂ »Â ?? à «ÂªΕΝΑ¨ΕΝΑ¬Â-¬ à «Â  ¤ΕΝΑ¬Â ??  ?? êΕΝΑ³ΕΝΑ¼ ΕΝΑªÂ ° Â? ì ?? ?? à «Â¶Â ??¬Â  ¼à «Â¥ΕΝΑ¼ à «Â  ¤à «Â £ ¹à «Â         ¤.

 .textContainer / * ... * / word-break: keep-all;  

Αυτή η ιδιότητα ενδέχεται να υποστηρίζει μια άλλη τιμή που ονομάζεται break-word στο μέλλον. Θα δείτε πώς break-word λειτουργεί αργότερα, στο “Επικάλυψη υπερχείλισης” αυτού του άρθρου.

Ευκαιρίες διακοπής του Word

Οι προγραμματιστές μπορούν επίσης προσθέστε ευκαιρίες τυλίγματος μέσα σε λέξεις, χρησιμοποιώντας το Στοιχείο HTML. Εάν ένα πρόγραμμα περιήγησης χρειάζεται να τυλίξει μια συμβολοσειρά κειμένου, θα εξετάσει το σημείο όπου είναι παρούσα για μια ευκαιρία περιτυλίγματος.

 
 ΕΝΑ¢Â ?? ?? Γεια σας. ΕΝΑ¢Â ?? ?? Γεια σας. ΕΝΑ¢Â ?? ?? Hello â ?? ?? Γεια σας. ΕΝΑ¢Â ?? ?? Γεια σας. ΕΝΑ¢Â ?? ?? Γεια σας. ΕΝΑ¢Â ?? ?? Γεια σας. ΕΝΑ¢Â ?? ?? Γεια σας. ΕΝΑ¢Â ?? ?? Γεια σας. ΕΝΑ¢Â ?? ?? Γεια σας. ΕΝΑ¢Â ?? ?? Γεια σας. ΕΝΑ¢Â ?? ?? Γεια σας. ΕΝΑ¢Â ?? ?? Γεια σας. ΕΝΑ¢Â ?? ?? Γεια σας. ΕΝΑ¢Â ?? ?? Γεια σας. ΕΝΑ¢Â ?? ?? Γεια σας. ΕΝΑ¢Â ?? ?? Γεια σας. ΕΝΑ¢Â ?? ?? Γεια σας. ΕΝΑ¢Â ?? ?? Γεια σας. ΕΝΑ¢Â ?? ?? Γεια σας. ΕΝΑ¢Â ?? ?? Γεια σας. ΕΝΑ¢Â ?? ?? Γεια σας. ΕΝΑ¢Â ?? ?? Γεια σας. ΕΝΑ¢Â ?? ?? Γεια σας. ΕΝΑ¢Â ?? ?? Γεια σας. ΕΝΑ¢Â ?? ?? Γεια σας. ΕΝΑ¢Â ?? ?? γεια σας. 
 

 .textContainer / * ... * / white-space: προ-περιτύλιγμα;  

Χωρίς , ΟΛΟΚΛΗΡΟ “γεια σας” η λέξη θα είχε γίνει σε μια νέα γραμμή. Προσθέτοντας στον κώδικα HTML, ενημερώσαμε τον περιηγητή ότι είναι εντάξει να σπάσει τη λέξη εκείνη τη στιγμή για το περιτύλιγμα, σε περίπτωση που είναι απαραίτητο.

Υπαινιγμοί

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

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

 
 bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse 
 

 .textContainer / * ... * / -webkit-παύλες: αυτόματα; -ms-παύλες: αυτόματα. παύλες: αυτόματα.  

Επικάλυψη υπερχείλισης

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

Σημειώστε ότι υπερχείλιση είναι επίσης γνωστή ως word-wrap (είναι ψευδώνυμα).

 
 bluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehouse 
 

 .textContainer / * ... * / overflow-wrap: break-word;  

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

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