<wbr>

Тег <wbr> расшифровывается как «возможность разрыва слова». Это невидимый тег, который подсказывает браузеру, где он может добавить разрыв строки, когда текст переполняется.

Синтаксис тега <wbr>

Это очень длинный текст с возможностью разрыва слова <wbr>.

Тег не требует закрывающего тега и может использоваться внутри текстовой строки.

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

Тег является частью спецификации HTML Living Standard.

Семантический или нет

Тег <wbr> считается семантическим, поскольку несёт в себе смысл и точно передаёт назначение своего содержимого.

Примеры использования

Добавление переноса строки в длинном URL-адресе:

<p>Здесь длинный URL: https://www.example.com/this-is-a-really-long-url-without-any-breaks/<wbr></p>

Разбиение длинного слова:

<p>Это предложение содержит длинное слово, которое может быть разорвано в определенной точке: supercali<wbr>водоворотоподобно.</p>

Добавление возможности разрыва слова в длинном тексте:

<p>В этом тексте много слов, и его нужно разбить на определенные части для лучшей читабельности. Используйте тег <wbr> в соответствующих местах.</p>

Для чего использовать тег <wbr>

• разбиение длинных слов или URL-адресов;
• для улучшения читабельности длинных текстов;
• для предотвращения горизонтальной прокрутки на небольших экранах.

Атрибуты тега <wbr>

У тега нет специфических атрибутов.

Глобальные атрибуты

Тег поддерживает все глобальные атрибуты HTML.

Ограничения

Для использования тега <wbr> нет никаких ограничений.

Нюансы

• если текст слишком короткий, добавление тега может не дать никакого эффекта;
• добавление слишком большого количества тегов может нарушить целостность текста и затруднить его чтение.

Поддержка браузеров

Тег поддерживается всеми современными браузерами.

Актуальная информация — на сaniuse.

Альтернативные теги

Альтернативных тегов для тега <wbr> не существует.

Чем заменить тег

Если вы хотите предотвратить перенос длинного слова на новую строку, вы можете использовать CSS свойство white-space: nowrap;. Однако это может привести к появлению горизонтального скролла, если элемент не помещается в видимой области страницы

Актуальность

Тег <wbr> не является устаревшим.

Хотите узнать больше об HTML-тегах?

Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.