# Тег wbr

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

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

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

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

Мягкие переносы &shy; не будут работать, если свойство `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; }`

:

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

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

`<div id="elem"> это суперпупердлинныйпредлинный текст </div>` `#elem { width: 200px; border: 1px solid black; }`

:

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

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

← →
↑