Тег wbr указывает место, где браузер может сделать перенос строки в случае необходимости (если текст не помещается в ширину элемента). Такие переносы называются мягкими.

Не требует закрывающего тега.

При переносе слова через тег wbr символ переноса "-" не добавляется. Если он вам нужен - используйте символ мягкого переноса ­ (точка с запятой в конце обязательна, это не опечатка).

Мягкий перенос ­ указывает браузеру место, где он может сделать перенос слова (в случае необходимости), поставив при этом символ переноса "-".

Мягкие переносы ­ не будут работать, если свойство hyphens задано в значении none (а переносы wbr будут).

См. также тег br, который делает гарантированный перенос на новую строку (а не мягкий).

См. также CSS свойство hyphens, которое задает настоящие переносы слов, как в книге (то есть браузер сам определит, где перенести слово, пользуясь правилами переноса).

См. также CSS свойства word-break, word-wrap, overflow-wrap, overflow, text-overflow, которые также управляют переносами слов.

Примеры

Пример . Текст без переносов

В данном примере приведен образец текста, в котором есть длинные слова, которые вылезают за границу блока. Блоку задана маленькая ширина так, чтобы большое слово в нем не поместилось:

это суперпупердлинныйпредлинный текст

Результат выполнения кода:

это суперпупердлинныйпредлинный текст

Пример . Тег wbr

Сейчас в тексте добавлены теги wbr в местах, где мы рекомендуем браузеру сделать перенос слова в случае необходимости (обратите внимание на то, что браузер сделал переносы не везде, где мы указали):

это супер<wbr>пупер<wbr>длинный<wbr>предлинный текст

Результат выполнения кода:

это суперпупердлинныйпредлинный текст

Пример . Символ &shy;

А теперь вместо тега wbr поставлен символ &shy;. В местах переноса будут отображаться дефисы:

это супер­пупер­длинный­предлинный текст

Результат выполнения кода:

это супер­пупер­длинный­предлинный текст