word-wrap

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

Пример того, как можно настроить перенос по символам с помощью word-wrap.

        
          
          p {  border: 1px solid #fff;  width: 100px;  word-wrap: break-word;}
          p {
  border: 1px solid #fff;
  width: 100px;
  word-wrap: break-word;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Возможные значения:

• normal — значение по умолчанию. При этом значении текст будет переноситься по пробелам, специальным символам и тегу <br>.
• break-word — слово переносится на любой букве при достижении края родительской области.

💡 По умолчанию длинное слово без пробела между ними будет выходить за ширину контейнера, если оно не разорвано.