Простой HTML-тег, который делает переносы правильными и красивыми

Проблема: в макете для вёрстки есть очень длинное слово, которое не помещается внутри блока на небольших экранах. Нужно сделать в HTML перенос строки.

Ужасное решение: вставить посреди этого слова тег
, который разрывает строку. Дизайнер будет ругаться, но зато слово влезет.

Неплохое решение: использовать свойство CSS word-break: break-all. Выглядит симпатичнее разрыва строки, но есть проблема — мы не контролируем перенос слова.

Отличное решение: использовать одиночный тег мягкого переноса . С его помощью можно точно указать, какая часть слова будет переноситься.

Чтобы разница между и word-break: break-all была наглядной, посмотрим пример кода. Меняйте размеры блоков по горизонтали, чтобы видеть брейкпоинты.

Пояснение:

1. При word-break: break-all буквы переносятся как попало. Если критично, чтобы соблюдались правила переносов, то это решение не подходит.
2. При части слова переносятся так, как мы указываем в коде. Можно наставить тег между слогами, чтобы на любом разрешении правила переносов соблюдались.

Если нужно, чтобы между частями слова был видимый знак переноса, то используем вместо символ мягкого дефиса — ­.

В спецификации W3C приводится ещё один пример использования тега — обёртывание частей кода, если вся строка не помещается внутри блока.

Поддержка в браузерах: полная, за исключением Internet Explorer 8-11.

Запомнить: если нужно управляемо перенести длинные слова или строки кода, используем тег .

Теперь вы знаете, как сделать в HTML перенос на новую строку, чтобы это выглядело красиво.