Тег <wbr>: возможная точка переноса
Элемент wbr отмечает место, где браузер может разорвать длинную строку, если ей не хватает ширины.
Назначение
Элемент wbr отмечает место, где браузер может разорвать длинную строку, если ей не хватает ширины.
Как это работает
Это возможность, а не обязательный перенос как у br. В отличие от мягкого дефиса wbr сам по себе не рисует дефис на границе. При достаточной ширине строка остаётся цельной.
Пример
<div style="max-width:13rem;border:1px solid;padding:12px">ОченьДлинное<wbr>УчебноеНазвание<wbr>БезПробелов</div>Что должно получиться
Название может переноситься в отмеченных местах при недостатке пространства. Если одна отдельная часть всё ещё слишком длинная, потребуются дополнительные правила переноса или прокрутка.
Граница применения и частая ошибка
Не вставляйте случайные переносы в точный программный код, если они затрудняют копирование или чтение. Для неизвестных длинных строк также рассмотрите CSS overflow-wrap.
Самостоятельная проверка
Сужайте контейнер и сравните наличие wbr с обычной длинной строкой. Проверьте скопированный текст в целевом браузере, если значение должно передаваться без добавочных символов.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.