overflow-wrap

Говорим браузеру, как поступать со словами, которые не поместились в контейнер.

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

Кратко

Скопировано

Свойство overflow-wrap управляет переносом слов, которые не помещаются по длине в родительский элемент. Раньше в спецификации не было подобного свойства, и браузеры на своё усмотрение реализовывали word-wrap, однако оно не было описано в спецификации.

Пример

Скопировано
        
          
          <p>  Работал у нас на заводе  как-то отменный профессионал —  автомотовелофототелерадиомонтёр.</p>
          <p>
  Работал у нас на заводе
  как-то отменный профессионал —
  автомотовелофототелерадиомонтёр.
</p>

        
        
          
        
      
        
          
          p {  overflow-wrap: normal;}
          p {
  overflow-wrap: normal;
}

        
        
          
        
      
Открыть демо в новой вкладке

Как пишется

Скопировано
  • normal — длинные слова или строки с неразрывным пробелом не переносятся, даже если выходят за границы родителя (значение по умолчанию).
  • break-word — слово разбивается в любом месте, если не помещается в размеры, заданные родительскому элементу. Правила мягкого переноса не учитываются.
  • anywhere — как и при значении break-word, слово разбивается в любом месте, но во внимание берутся правила мягкого переноса. Это сильно заметно, если родителю в качестве значения ширины задано min-content. Браузер расставляет мягкие переносы на своё смотрение.

В разных языках существуют разные правила, по которым можно переносить части слова на новую строку. Например, в русском языке можно переносить слова по слогам. Места, в которых по правилам языка может быть разорвано слово, называются мягкими переносами.

Третий абзац в этом примере выглядит немного диким, но так браузер расставил мягкие переносы 🤷‍♀️

Открыть демо в новой вкладке