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

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).