HTML тег <wbr>
Тег HTML <wbr> отмечает возможность переноса слова: место, где длинное слово или URL может переноситься при необходимости. Синтаксис и примеры.
HTML-тег <wbr> (Word BReak opportunity — возможность переноса слова) отмечает место внутри текста, где браузер может вставить перенос строки, если строка иначе выйдет за границу контейнера. Он не принудительно вставляет перенос — он лишь добавляет возможность сделать его в этом месте. Если слово умещается в строке, <wbr> вообще ничего не отображает.
Это отличается от тега <br>, который всегда принудительно вставляет перенос строки. С <wbr> браузер делает перенос в этом месте только тогда, когда нужно обернуть длинную, неразрывную строку — например, URL, путь к файлу или очень длинное слово.
Тег <wbr> является одним из элементов HTML5.
Зачем использовать <wbr>?
По умолчанию браузеры переносят строки на пробелах и дефисах. Длинная строка без пробелов — URL, путь к файлу, хеш или составное длинное слово — не имеет естественной точки переноса, поэтому браузер делает одну из двух нежелательных вещей:
- выталкивает строку за край контейнера, вызывая горизонтальное переполнение, или
- переносит строку в неудобном, трудночитаемом месте.
Размещение <wbr> в подходящих местах сообщает браузеру: «вот безопасное место для переноса строки, если не хватает места». Переносы появляются только при необходимости, поэтому на широком экране строка остаётся цельной.
Перенос длинного URL — наиболее частый случай
Длинный URL без пробелов — классический случай применения <wbr>. Добавьте <wbr> после косых черт или точек, чтобы ссылка аккуратно переносилась внутри узкой колонки вместо выхода за границу:
<p style="width: 220px; border: 1px solid #ccc; padding: 8px;">
Read it here:
https://<wbr>www.w3docs.com<wbr>/learn-html<wbr>/html-wbr-tag
</p>На широком экране URL остаётся на одной строке, но внутри контейнера шириной 220px выше он переносится только в разрешённых вами точках <wbr>.
<wbr> для длинного слова
<wbr> также помогает с отдельными чрезвычайно длинными словами. Сравните абзац с возможностями переноса и без них:
<p>This is the longest word you can ever meet in the English language pneumonoultramicroscopicsilicovolcanoconiosis</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>Первый абзац может выйти за границу контейнера; второй аккуратно переносится между слогами, когда места не хватает.
<wbr> vs. ­ vs. CSS
<wbr> — один из нескольких способов управлять переносом текста. Каждый ведёт себя по-разному, поэтому выбирайте подходящий инструмент:
| Техника | Что делает | Показывает дефис? |
|---|---|---|
<wbr> | Отмечает возможность переноса в разметке. Переносит только при необходимости. | Нет |
­ (мягкий дефис) | Отмечает возможность переноса. Переносит только при необходимости. | Да — в месте переноса появляется дефис |
CSS overflow-wrap: break-word | Позволяет браузеру переносить длинное слово в любом месте, чтобы избежать переполнения. | Нет |
CSS word-break: break-all | Принудительно вставляет переносы между любыми двумя символами. | Нет |
Когда что выбирать:
- Используйте
<wbr>, когда вы знаете правильные точки переноса (после каждого/в URL, между слогами) и хотите, чтобы дефис не отображался. - Используйте
­, когда вам нужен тот же контроль, но с дефисом в месте переноса — идеально для расстановки переносов в настоящих словах. - Используйте CSS
overflow-wrap/word-break, когда вы не можете (или не хотите) редактировать каждую строку вручную и просто хотите предотвратить переполнение по всему сайту. Обычно это лучший выбор для пользовательского контента, где вы не контролируете текст.
Тег <wbr> не добавляет дефис в месте переноса строки. Если вы хотите, чтобы дефис появлялся только в конце перенесённой строки, используйте вместо него ­ (символьный объект мягкого дефиса).
Пример с путём к файлу
Здесь <wbr> позволяет пути к файлу Windows переноситься после каждого сегмента с обратной косой чертой:
<p>You can find the file by going
C:\user\docs\Letter.txt
</p>Без возможностей переноса весь путь перейдёт на следующую строку. Добавление элементов <wbr> позволяет ему аккуратно переноситься:
<p>You can find the file by going C:<wbr>\user<wbr>\docs<wbr>\Files<wbr>\Letter.txt</p>Синтаксис
Тег <wbr> является пустым элементом, поэтому у него нет закрывающего тега. В XHTML его необходимо самозакрывать как <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> не имеет специфических атрибутов. Он поддерживает только глобальные атрибуты и атрибуты событий.