Својство 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;
}

Результат:

Погледајте такође