overflow-wrap

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

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

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

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

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

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

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

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