<wbr>

Тег <wbr> указывает браузеру место, где допускается делать перенос строки в тексте, если текст не влезает в родительский элемент. Это полезно для адаптивной вёрстки если у вас в тексте есть длинные слова или, например, ссылки.

Попробуйте изменить размер родительского элемента чтобы увидеть как работает тег <wbr>.

Тег <wbr> не парный, можно писаться <wbr> или <wbr/>.

        
          
          <p>  метоксихлор<wbr>диэтиламино<wbr>метил<wbr>бутил<wbr>амино<wbr>акридин</p>
          <p>
  метоксихлор<wbr>диэтиламино<wbr>метил<wbr>бутил<wbr>амино<wbr>акридин
</p>

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

Обычно браузеры не делают переносов длинных слов. Даже если слово не влезает, оно просто будет торчать наружу из родительского элемента. Браузер сделает перенос только там где стоит пробел или дефис. Но есть ситуации когда этого недостаточно.

Например, если у вас есть длиннющая ссылка, то браузер может сделать перенос в неподходящем месте (где стоит какой-нибудь рандомный дефис), либо вообще его не сделать. Если разметить тегом <br>, то разметка для маленького экрана будет выглядеть плохо на большом, и наоборот, но переносы все равно нужно как-то расставить. Вот такую дилемму и решает тег <wbr>.

Просто не думайте обо всех ситуациях в которых может оказаться твой кусок текста. Расставьте <wbr> везде где считаете возможным, а дальше браузер сам сделает красиво в зависимости от ситуации.

Тег <wbr> поддерживает глобальные атрибуты и события.

💡 Не добавляет символа переноса при фактическом переносе. Если в тексте есть пробелы, то браузер справится сам.

💡 При переносе слова через тег <wbr> символ переноса (тире) не добавляется. Если он вам нужен — используйте символ мягкого переноса ­.

💡 Тег нужно ставить после знаков пунктуации, а не перед ними.