Тег wbr

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

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

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

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

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

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

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

html<div id="elem">
  this is supersupersuperlong text
</div>

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

Результат:

Пример . Тег wbr

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

html<div id="elem">
  this is super<wbr>super<wbr>super<wbr>long text
</div>

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

Результат:

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

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

html<div id="elem">
  this is super­super­super­long text
</div>

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

Результат:

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