HTML-тег <wbr>
Тег <wbr> используется для указания браузеру, где в тексте может быть добавлен перенос строки. В отличие от тега <br>, который принудительно вставляет перенос строки, при использовании <wbr> браузер сначала анализирует содержимое, а затем при необходимости вставляет перенос строки (для слишком длинных слов или URL-адресов).
Если вы не используете тег <wbr>, длинные слова могут либо переноситься в неправильном месте (что затрудняет чтение), либо не переноситься вовсе, сдвигая макет страницы в сторону.
Тег <wbr> является одним из элементов HTML5.
DANGER
Элемент <wbr> не добавляет дефис в месте переноса строки. Если вы хотите, чтобы дефис появлялся только в конце строки, используйте ­ (сущность мягкого дефиса).
Вы можете не часто использовать этот элемент. Но если он вам понадобится, <wbr> будет действительно полезен. Давайте рассмотрим пример ниже, где у нас есть путь к файлу.
HTML-тег <wbr>
<p>You can find the file by going
C:\user\docs\Letter.txt
</p>Как вы видите, здесь нет возможности для переноса строки, и весь путь к файлу перешел на следующую строку. Если добавить элементы <wbr>, путь к файлу будет разбит правильно при отображении этого абзаца.
HTML-тег <wbr>
<p>You can find the file by going C:<wbr>\user<wbr>\docs<wbr>\Files<wbr>\Letter.txt</p>Синтаксис
Тег <wbr> является пустым, что означает, что закрывающий тег не требуется. Однако в XHTML тег (<wbr>) должен быть закрыт (<wbr/>).
Пример использования HTML-тега <wbr>:
HTML-тег <wbr>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Example of a long string of text without wbr.</p>
<p>This is the longest word you can ever meet in the English language pneumonoultramicroscopicsilicovolcanoconiosis</p>
<p>Example of a long string of text with wbr.</p>
<p>This is the longest word you can ever meet in the English language pneumono<wbr />ultra<wbr />micro<wbr />scopic<wbr />silico<wbr />volcano<wbr />coniosis</p>
</body>
</html>Результат
Атрибуты
Тег <wbr> поддерживает глобальные атрибуты и атрибуты событий.
Практика
Каково основное назначение тега <wbr> в HTML?