Ιδιότητα overflow-wrap

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

Σύνταξη

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

Τιμές

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

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

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

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

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

Результат:

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

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

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

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

Результат:

Δείτε επίσης