Свойство overflow-wrap

Свойство overflow-wrap позволяет перенести буквы длинного слова на новую строку, если это слово не влазит в ширину контейнера.

Синтаксис

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

Значение	Описание
`break-word`	Заставляет длинные слова переноситься на новую строку, если это слово не помещается в контейнер. При этом слово начнется с новой строки.
`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;
}

Результат:

А теперь те буквы, которые не помещались, просто перенесутся на следующую строку (при этом длинное слово все равно будет начинаться с новой строки):

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

Результат:

свойство word-break,
которое также позволяет перенести буквы длинного слова на новую строку
свойство word-wrap,
которое является устаревшим названием свойства overflow-wrap
свойство hyphens,
которое включает переносы слов по слогам
тег wbr,
который реализует мягкие переносы средствами HTML
тег br,
с помощью которого можно принудительно заставить перенести текст на новую строку