Својство word-break

Својство word-break омогућава пренос слова дугачке речи у нови ред, ако та реч не стане у ширину контејнера.

Синтакса

cssселектор {
  word-break: break-all | keep-all | normal;
}

Вредности

Подразумевана вредност: 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;
}

Результат:

Пример . Вредност break-all

А сада ће се та слова, која нису стајала, једноставно пренети у следећи ред:

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;
}

Результат:

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