Тег wbr

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

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

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

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

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

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

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

<div id="elem">
	это суперпупердлинныйпредлинный текст
</div>

#elem {
	width: 200px;
	border: 1px solid black;
}

Пример . Тег wbr

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

<div id="elem">
	это супер<wbr>пупер<wbr>длинный<wbr>предлинный текст
</div>

#elem {
	width: 200px;
	border: 1px solid black;
}

Пример . Символ 

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

<div id="elem">
	это суперпупердлинныйпредлинный текст
</div>

#elem {
	width: 200px;
	border: 1px solid black;
}

Смотрите также

тег br,
который делает перенос на новую строку
свойство hyphens,
которое задает настоящие переносы слов
свойства word-break и overflow-wrap,
которые позволяют перенести буквы длинного слова
свойство overflow,
которое обрезает вылезающие за границу блока части

Тег wbr

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

Пример . Тег wbr

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

Смотрите также

Пример . Символ