Свойство word-break

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

Синтаксис

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

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

Результат:

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

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

Результат:

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