wbr — место переноса слов
- 25 января 2023
🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
Тег <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-адресов;
- для улучшения читабельности длинных текстов;
- для предотвращения горизонтальной прокрутки на небольших экранах.
Нюансы
- если текст слишком короткий, добавление тега может не дать никакого эффекта;
- добавление слишком большого количества тегов может нарушить целостность текста и затруднить его чтение.
Чем заменить тег
Если вы хотите предотвратить перенос длинного слова на новую строку, вы можете использовать CSS свойство white-space: nowrap;. Однако это может привести к появлению горизонтального скролла, если элемент не помещается в видимой области страницы.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.