Сложности с переносом строк. HTML & CSS приёмы.
Maksym Pohribniak
Встречаются ситуации когда у контейнера недостаточно ширины для размещения контента внутри. Как на картинке выше. Существует множество приёмов для форматирования текста который вылезает за пределы блока. Разберем хорошие и не очень средства расположения текста в условиях недостатка места.
Вот как может выглядеть текст и ссылка в блоке недостаточной ширины:
Этот же текст будет использован в дальнейших примерах.
На десктопе данный текст может выглядеть хорошо, но на мобильном не помещается в блок. Какие варианты решения этой проблемы могут быть?
❌ overflow: hidden;
Самый простой прием, но абсолютно не подходящий в этом случае.
Данное свойство отвечает за переполнение блока контентом. Его значение hidden скрывает выходящий за границы контейнера контент. Результат:
Обрезав слова мы выбросили часть текста. Не лучшая практика.
❌ word-break: break-all;
Свойство определяет, где будет установлен перевод на новую строку в случае превышения текстом границ блока. Этот вариант может быть приемлемым для URL адресов случайно просочившихся в текст. Но обычный текст читать не удобно, да и выглядит все сломанным. Пример:
break-all воспринимает весь текст как восточноазиатский (за исключением текста на китайском/японском/корейском языке), который имеет возможность переноситься где угодно (кроме точек в конце услуг и закрывающих скобок).
❌ word-break: break-word;
Данный способ работает аналогично предыдущему, с одним важным отличием - разбиваются только самые длинные слова, которые невозможно уместить в контейнер. Пример:
Свойство не работает в IE и Edge браузерах но для них есть alias в виде:
overflow-wrap: normal | break-word | anywhere
✅ hyphens: auto;
Свойство hyphens сообщает браузеру, как расставлять переносы слов в блоке текста. Словарь переносов хранится в браузере и подключается только при наличии атрибута lang с кодом языка. Так, для русского языка следует добавить lang="ru" к тегу <html> или непосредственно к абзацу текста.
Не забудьте добавить вендорные префиксы:
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
Так же существует множество вспомогательных свойств, которые помогут настроить данное свойство под себя.
hyphenate-limit-chars: 10 4 4;
hyphenate-limit-lines: 2;
hyphenate-limit-last: always;
hyphenate-limit-zone: 8%;
hyphenate-limit-chars - расширенная настройка переносов
(выше мы определили только для слов с 10 символами и более четырех символов до / после переноса).
hyphenate-limit-lines - максимальное количество последовательных строк в элементе, которое может заканчиваться словом с переносом.
hyphenate-limit-last - Это свойство указывает максимальное количество последовательных переносимых строк в элементе.
hyphenate-limit-zone - зона переноса справа от блока.
Отличное свойство для автоматизации переноса строк.
Если вам нужен полный контроль над переносами например в заголовках или других важный частях контента, вам подойдут следующие 2 способа.
✅ <wbr>
Всем хорошо знаком тег <br>, но про <wbr> мало кто слышал.
<wbr> указывает браузеру место, где допускается делать перенос строки в тексте, если этого требует ширина родительского элемента. По сути это место возможного переноса строки. Пример:
В местах красных стрелок проставлены теги <wbr>, а там где зеленая его нет. То есть возможные переносы сработали. Минус данного свойства - ни один браузер при переносе текста не добавляет символ дефиса и данный тег не работает в IE.
✅ ­
Мягкий перенос — это перенос части слова на новую строку в случае необходимости. Если необходимости в переносе нет, то он никак себя не проявляет. В примере ситуация со стрелками та же что и в предыдущем (где красные – установлен мягкий перенос, где зеленая – нет).
В отличие от элемента <wbr>, который также указывает браузеру место, где возможен разрыв слова, при использовании мягкого переноса к концу строки добавляется дефис. Работает во всех браузерах.