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

Подсказки

Секция статьи "Подсказки"

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