тк 3 июля праздник (в беларуси), буду не онлайн (по возможности буду отвечать)

Свойство overflow-wrap

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

Синтаксис

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

Значения

Значение Описание
break-word Заставляет длинные слова переносится на новую строку, если это слово не помещается в контейнер. При этом слово начнется с новой строки.
normal Стандартное поведение: если длинное слово не влазит по ширине в контейнер - оно просто вылезет за его границу (при этом начнется с новой строки).

Значение по умолчанию: normal.

Пример . Значение normal

В данном примере очень длинное слово не поместится в контейнер и вылезет за его границы (при этом начнется с новой строки):

<div id="elem"> Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur adipiscing elit. </div> #elem { word-wrap: normal; overflow-wrap: normal; border: 1px solid red; width: 200px; }

:

Пример . Значение break-word

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

<div id="elem"> Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur adipiscing elit. </div> #elem { overflow-wrap: break-word; border: 1px solid red; width: 200px; }

:

Смотрите также

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