Элемент <wbr>

Элемент <wbr> (от англ. word break opportunity — возможность разрыва слова) указывает браузеру место, где допускается делать перенос строки в тексте, если ширина текста превышает ширину родительского элемента.

Элемент <wbr> может быть полезен для предотвращения появления горизонтальной прокрутки при написании длинных слов, URL-адресов или любого другого текста, где разрывы строк важны для корректного отображения.

Стоит отметить, что элемент <wbr> не добавляет дефис в точке разрыва слова. Если вы хотите, чтобы при переносе слова появлялся дефис, используйте спецсимвол мягкого дефиса (­).

Атрибуты

Для элемента <wbr> доступны глобальные атрибуты и события.

Стиль по умолчанию

Нет.

Пример

#resizable-div {
  padding-left: 15px;
  padding-right: 10px;
  font-family: helvetica, arial, sans-serif;
  font-size: 17px;
  overflow: hidden;
  resize: horizontal;
  width: 158px;
  border: 2px dashed #999;
}

<p>Чтобы нагляднее увидеть результат, вы можете изменять ширину элемента, потянув за правый нижний уголок.</p>

<div id="resizable-div">
  <p>метоксихлордиэтиламинометилбутиламиноакридин</p>

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

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