Bootstrap 4.3 | Как переносить длинные слова?

Стилевой файл Bootstrap (CSS) имеет специальный класс «text-break«. С его помощью длинные слова будут разделяться на составные части (подстраиваться под размеры родительского блока) и переноситься на новую строку.

Bootstrap класс "text-break"
Bootstrap класс «text-break»

Минимальное количество переносимых символов может составлять 1 штуку. Возможно это будет не очень эстетично и красиво, но это позволит избавиться от множества проблем с горизонтальной прокруткой.

Длинные слова HTML — это последовательный набор букв алфавита без пробелов, при котором длина символов начинает превышать размеры ширины родительского блока.

Код для встраивания в разметку HTML документа

class="text-break"

Код класса «text-break» в CSS файле Bootstrap

Код класса "text-break" в CSS файле Bootstrap
Код класса «text-break» в CSS файле Bootstrap

В основе работы класса «text-break» от Bootstrap лежит CSS свойство «word-break» со значением «break-word»

Зачем нужен класс «text-break» в Bootstrap?

Проблемы начинаются тогда, когда вы пытаетесь увеличивать размеры шрифтов на HTML страницах вашего сайта. По-умолчанию Bootstrap не предусматривает пропорциональное увеличение размера текстов, с увеличением экранов. Стандартное значение размера шрифта из коробки — 16 пикселей. Этого мало.

Стандартное значение размера шрифта из коробки - 16 пикселей
Стандартное значение размера шрифта из коробки — 16 пикселей

Пользователи, которые не умеют увеличивать масштабы HTML страниц в браузерах будут страдать. Вы, как заботливый веб-мастер, захотите пойти на встречу своим пользователям и начнёте играться со свойствами «calc» для пропорционального увеличения текстов при масштабировании страницы.

И в этот момент обязательно где-то на мобильных девайсах начнёт вылезать горизонтальная прокрутка. Чтобы уменьшить риски проблем при вёрстке страниц нужно использовать класс «text-break«.

А если у вас всё равно остаётся прокрутка при применении класса «text-break», тогда ищите незакрытый DIV или фантомные ПАДДИНГИ у других элементов разметки.

Где использовать класс «text-break» в Bootstrap?

Обязательно внедряйте его в заголовки от H1 до H6 т.к. они могут сильно увеличивать размеры текста. Также внедряйте в те элементы HTML-разметки, где могут накладываться другие классы Bootstrap, увеличивающие размеры шрифтов. Например класс «display-1» (2, 3 или 4).

Поделись записью