Ιδιότητα overflow-wrap

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

Σύνταξη

επιλογέας {
	overflow-wrap: break-word | normal;
}

Τιμές

Τιμή	Περιγραφή
`break-word`	Αναγκάζει τις μεγάλες λέξεις να μεταφέρονται σε νέα γραμμή, εάν η λέξη δεν χωράει στον περιέκτη. Σε αυτή την περίπτωση, η λέξη θα ξεκινήσει από νέα γραμμή.
`normal`	Προεπιλεγμένη συμπεριφορά: εάν μια μεγάλη λέξη δεν χωράει στο πλάτος του περιέκτη - απλώς θα βγει εκτός των ορίων του (σε αυτή την περίπτωση θα ξεκινήσει από νέα γραμμή).

Προεπιλεγμένη τιμή: normal.

Παράδειγμα . Τιμή normal

Σε αυτό το παράδειγμα, μια πολύ μεγάλη λέξη δεν θα χωρέσει στον περιέκτη και θα βγει εκτός των ορίων του (σε αυτή την περίπτωση θα ξεκινήσει από νέα γραμμή):

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	word-wrap: normal;
	overflow-wrap: normal;
	border: 1px solid red;
	width: 200px;
}

Παράδειγμα . Τιμή break-word

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

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	overflow-wrap: break-word;
	border: 1px solid red;
	width: 200px;
}

Δείτε επίσης

η ιδιότητα word-break,
που επιτρέπει επίσης τη μεταφορά γραμμάτων μιας μεγάλης λέξης σε νέα γραμμή
η ιδιότητα word-wrap,
που είναι μια παρωχημένη ονομασία για την ιδιότητα overflow-wrap
η ιδιότητα hyphens,
που ενεργοποιεί τη μεταφορά λέξεων κατά συλλαβές
η ετικέτα wbr,
που υλοποιεί μαλακές αλλαγές γραμμής μέσω HTML
η ετικέτα br,
με την οποία μπορείτε να αναγκάσετε το κείμενο να μεταφερθεί σε νέα γραμμή