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

Результат:

Вижте също