Ιδιότητα word-break

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

Σύνταξη

cssεπιλογέας {
  word-break: break-all | keep-all | normal;
}

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

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

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

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

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

Результат:

Και τώρα τα γράμματα που δεν χωρούσαν, απλά θα μεταφερθούν στην επόμενη γραμμή:

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

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

Результат:

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