Проблема: в макете для вёрстки есть очень длинное слово, которое не помещается внутри блока на небольших экранах. Нужно сделать в HTML перенос строки.
Ужасное решение: вставить посреди этого слова тег <br>, который разрывает строку. Дизайнер будет ругаться, но зато слово влезет.
Неплохое решение: использовать свойство CSS word-break: break-all. Выглядит симпатичнее разрыва строки, но есть проблема — мы не контролируем перенос слова.
Отличное решение: использовать одиночный тег мягкого переноса <wbr>. С его помощью можно точно указать, какая часть слова будет переноситься.
Чтобы разница между <wbr> и word-break: break-all была наглядной, посмотрим пример кода. Меняйте размеры блоков по горизонтали, чтобы видеть брейкпоинты.
See the Pen
wbr by Pochemuta (@pochemuta)
on CodePen.
Пояснение:
- При word-break: break-all буквы переносятся как попало. Если критично, чтобы соблюдались правила переносов, то это решение не подходит.
- При <wbr> части слова переносятся так, как мы указываем в коде. Можно наставить тег между слогами, чтобы на любом разрешении правила переносов соблюдались.
Если нужно, чтобы между частями слова был видимый знак переноса, то используем вместо <wbr> символ мягкого дефиса — ­.
В спецификации W3C приводится ещё один пример использования тега — обёртывание частей кода, если вся строка не помещается внутри блока.
Поддержка в браузерах: полная, за исключением Internet Explorer 8-11.
Запомнить: если нужно управляемо перенести длинные слова или строки кода, используем тег <wbr>.
Теперь вы знаете, как сделать в HTML перенос на новую строку, чтобы это выглядело красиво.
