<wbr>
- 25 января 2023
Тег <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.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше


Глобальные атрибуты HTML
Список основных атрибутов, которые подойдут ко всему.
- 29 марта 2023
Как добавить раздел на страницу. Тег <div>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023
Список описаний. Тег <dl>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023
Пункт выпадающего списка. Тег <option>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023
Как правильно добавить секцию на страницу. Тег <section>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023