Тег wbr (от английского word break opportunity, «возможность переноса слова») отмечает место, где браузер может перенести строку, если слово или адрес не умещаются в колонку. Это пустой тег: у него нет ни содержимого, ни закрывающего тега. Он ничего не рисует и в текст ничего не добавляет: если строка умещается, она остаётся цельной.
Тег даёт браузеру разрешение, а не команду: перенос случится только там, где строка иначе не умещается в колонку. Поэтому wbr записывают по границам смысла, например после косой черты в адресе или между частями составного слова, и он ничем не мешает, пока места хватает. Этим он отличается от br, который рвёт строку всегда.
<p>https://example.com/<wbr>catalog/<wbr>products</p>В этой статье
Тег wbr в HTML: что это и для чего нужен
Спецификация HTML описывает wbr как место, где допустим перенос строки. Тег пустой, собственных атрибутов у него нет, только глобальные. По данным справки MDN, он доступен во всех современных браузерах с 2015 года.
Нужен он там, где нет пробелов и браузеру некуда перенести строку: длинный адрес, составное слово, идентификатор, строка кода. Без подсказки такой текст идёт одной строкой и выходит за край колонки. В замере адрес в колонке 140 px остался одной строкой и вышел за край, а с wbr после каждого «/» занял пять строк и не вышел.
Тег ничего не добавляет к тексту: у слова «Электроэнцефалографический» с двумя wbr свойство textContent равно 26 знакам, как и у слова без них. Дефис при переносе не появляется.
Как записать тег wbr: адрес, длинное слово и код
Тег записывают там, где перенос допустим: после знака в адресе, между частями составного слова, после запятой в длинной строке кода. Лучше записывать после знака, а не до него: тогда знак остаётся в конце строки, а не уходит в начало следующей.
<p>https://example.com/<wbr>catalog/<wbr>products/<wbr>offers</p>
<p>Электро<wbr>энцефало<wbr>графический</p>Закрывающий тег не нужен. Запись <wbr/> тоже работает, а </wbr> парсер игнорирует: в замере a<wbr>b<wbr/>c<wbr></wbr>d превратилось в a<wbr>b<wbr>c<wbr>d. Записать что-либо внутрь wbr нельзя: вложенный span в замере оказался рядом с тегом, а не внутри.
Для адресов в тексте wbr нередко записывают скриптом после знаков «/», «.», «-» и «_». В кадре ниже это сделано для адреса, длинного слова или вашей строки. Двигайте ползунок и сравните четыре записи: без разрыва, с wbr, с мягким переносом и с пробелом нулевой ширины.
Пример: разрыв адреса и длинного слова
Выберите текст или введите свой и двигайте ползунок. Кадр считает строки и проверяет, выходит ли текст за край колонки.
Тег wbr, br и мягкий перенос: чем отличаются
Перенос строки можно задать четырьмя способами. Они отличаются тем, обязателен ли перенос, виден ли дефис и что попадает в текст.
| Способ | Перенос | Дефис | Символ в тексте |
|---|---|---|---|
wbr | Только если не умещается | Нет | Нет |
| br | Всегда | Нет | Разрыв строки |
Мягкий перенос ­ | Только если не умещается | Да, при переносе | Один невидимый символ |
Пробел нулевой ширины (U+200B) | Только если не умещается | Нет | Один невидимый символ |
Главная разница для читателя и скриптов - последний столбец. Мягкий перенос и пробел нулевой ширины добавляют в текст невидимый символ: слово, разбитое ими, не находится поиском подстроки в скрипте, а копия содержит лишние знаки. wbr их не добавляет. Проверьте в кадре.
От тега br wbr отличается тем, что не требует переноса: если слово умещается, строка не разрывается. Тег br разрывает строку всегда, а не только на узком экране.
Пример: копирование и поиск
Выберите способ. Кадр показывает число знаков, копию с пометками невидимых символов и результат поиска слова целиком.
Тег wbr, white-space и overflow-wrap: что выбрать
Перенос длинных слов можно получить и без разметки. Свойство overflow-wrap: anywhere разрешает перенос в любом месте слова, а word-break: break-all - разрыв между любыми знаками. В замере адрес в колонке 140 px с overflow-wrap: anywhere занял четыре строки. Разница в контроле: CSS ломает слово где придётся, а wbr - только там, где вы отметили.
.url {
overflow-wrap: anywhere;
}Свойство hyphens: auto добавляет переносы с дефисом по словарю языка и требует атрибут lang. В замере у Chrome в контейнере оно для русского слова не сработало, поэтому результат зависит от браузера и словаря.
У wbr есть неожиданность с white-space. Значения nowrap и pre запрещают перенос, но Chrome переносит строку в wbr и при них: слово с двумя wbr в колонке 140 px заняло две строки при nowrap, pre и обычном значении. Без wbr то же слово при nowrap осталось бы одной строкой и вышло бы за край. Поэтому в блоке, где перенос запрещён, wbr лучше не записывать, а поведение в других браузерах стоит проверить отдельно. Перенос строк в блоках кода разобран на странице про pre.
Пример: wbr и white-space
Выберите значение. Кадр считает строки у слова без wbr и с wbr и сообщает, нарушен ли запрет переноса.
Частые ошибки с тегом wbr
Ошибки с этим тегом связаны с местом записи, с выбором вместо других способов переноса и с ожиданиями от пустого тега.
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Длинный адрес без переносов | Адрес идёт одной строкой и выходит за край колонки | Добавить wbr после «/» и «.» или задать overflow-wrap: anywhere |
wbr перед знаком: <wbr>/catalog | Знак «/» уходит в начало следующей строки | Записывать wbr после знака: /<wbr>catalog |
br вместо wbr: https://<br>example.com | Перенос происходит всегда, даже на широком экране | Использовать wbr |
Мягкий перенос в адресе: ex­ample | В тексте остаётся невидимый символ, при переносе появляется дефис, слово не находится поиском подстроки | Использовать wbr |
Закрывающий тег: <wbr></wbr> | Закрывающий тег парсер игнорирует, запись выглядит как ошибка | Записывать <wbr> без закрывающего тега |
wbr в блоке с white-space: nowrap | Chrome всё равно переносит строку в этом месте | Не записывать wbr, если перенос запрещён |
Содержимое внутри wbr: <wbr>текст</wbr> | Тег пустой: текст оказывается рядом, а не внутри | Записывать wbr отдельно от текста |
