word-wrap

Как настроить переносы по символам в CSS.

Время чтения: меньше 5 мин

Кратко

Скопировано

Свойство word-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 — слово переносится на любой букве при достижении края родительской области.

Подсказки

Скопировано

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