<wbr>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

Интерактивный пример

Категории контента Основной поток, фразовый контент.
Допустимое содержимое Отсутствует
Пропуск тегов It is an empty element; it must have a start tag, but must not have an end tag.
Допустимые родители Любой элемент принимающий фразовый контент.
Допустимые ARIA-роли Любые
DOM-интерфейс HTMLElement

Атрибуты

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

Примечания

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

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

Этот элемент был впервые реализован в Internet Explorer 5.5 и был официально определён в HTML5.

Пример

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

html
<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>

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

Specification
HTML
# the-wbr-element

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
wbr

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

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