<wbr> элемент для возможности переноса строки в HTML

Элемент <wbr> HTML обозначает возможность переноса слова — позицию в тексте, в которой браузер может при необходимости разорвать строку, хотя правила переноса строк обычно не приводят к разрыву в этом месте.

Попробуйте

<div id="example-paragraphs">
  <p>Fernstraßenbauprivatfinanzierungsgesetz</p>
  <p>Fernstraßen<wbr />bau<wbr />privat<wbr />finanzierungs<wbr />gesetz</p>
  <p>Fernstraßen&shy;bau&shy;privat&shy;finanzierungs&shy;gesetz</p>
</div>

#example-paragraphs {
  background-color: white;
  overflow: hidden;
  resize: horizontal;
  width: 9rem;
  border: 2px dashed #999999;
}

Атрибуты

Этот элемент поддерживает только глобальные атрибуты.

Примечания

На страницах в кодировке UTF-8 <wbr> ведёт себя так же, как кодовая точка U+200B ZERO-WIDTH SPACE. В частности, она ведёт себя как кодовая точка Unicode bidi BN, то есть не влияет на порядок двунаправленного текста: <div dir=rtl>123,<wbr>456</div> отображается как 123,456, если перенос строки не происходит, а не как 456,123.

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

Примеры

Руководство по стилю Yahoo рекомендует переносить URL перед знаком препинания, чтобы знак препинания не оставался в конце строки, где читатель может принять его за окончание URL.

<p>
  http://this<wbr />.is<wbr />.a<wbr />.really<wbr />.long<wbr />.example<wbr />.com/With<wbr />/deeper<wbr />/level<wbr />/pages<wbr />/deeper<wbr />/level<wbr />/pages<wbr />/deeper<wbr />/level<wbr />/pages<wbr />/deeper<wbr />/level<wbr />/pages<wbr />/deeper<wbr />/level<wbr />/pages
</p>

Результат

Техническая сводка

Спецификации

Совместимость с браузерами

См. также

• overflow-wrap
• word-break
• hyphens
• Элемент <br>