🚀 Сегодня вам бесплатно доступен тренажёр по 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;. Однако это может привести к появлению горизонтального скролла, если элемент не помещается в видимой области страницы.