Как сделать перенос слов в css

Для управления переносом слов в CSS можно использовать свойство word-wrap или overflow-wrap.

word-wrap устарело и было заменено на overflow-wrap, но оба свойства выполняют одну и ту же задачу — определяют, как длинные слова должны разбиваться на несколько строк внутри элемента.

Вот примеры кода:

/* с помощью word-wrap */
p {
  word-wrap: break-word;
}

/* с помощью overflow-wrap */
p {
  overflow-wrap: break-word;
}

Оба примера кода предназначены для блока элемента <p>. Мы задаем свойство word-wrap или overflow-wrap со значением break-word. Это говорит браузеру, что он может разбивать слова на отдельные строки, если они слишком длинные, и поместить их на следующую строку, чтобы не нарушать структуру страницы.

Результатом будет автоматический перенос слов для элемента <p>. Пожалуйста, обратите внимание, что оба свойства работают только на нормальных текстах в рамках блочных элементов, а не на содержимом таблиц и других элементах.