Стилевой файл Bootstrap (CSS) имеет специальный класс «text-break«. С его помощью длинные слова будут разделяться на составные части (подстраиваться под размеры родительского блока) и переноситься на новую строку.
Минимальное количество переносимых символов может составлять 1 штуку. Возможно это будет не очень эстетично и красиво, но это позволит избавиться от множества проблем с горизонтальной прокруткой.
Длинные слова HTML — это последовательный набор букв алфавита без пробелов, при котором длина символов начинает превышать размеры ширины родительского блока.
Код для встраивания в разметку HTML документа
class="text-break"Код класса «text-break» в CSS файле Bootstrap
В основе работы класса «text-break» от Bootstrap лежит CSS свойство «word-break» со значением «break-word»
Зачем нужен класс «text-break» в Bootstrap?
Проблемы начинаются тогда, когда вы пытаетесь увеличивать размеры шрифтов на HTML страницах вашего сайта. По-умолчанию Bootstrap не предусматривает пропорциональное увеличение размера текстов, с увеличением экранов. Стандартное значение размера шрифта из коробки — 16 пикселей. Этого мало.
Пользователи, которые не умеют увеличивать масштабы HTML страниц в браузерах будут страдать. Вы, как заботливый веб-мастер, захотите пойти на встречу своим пользователям и начнёте играться со свойствами «calc» для пропорционального увеличения текстов при масштабировании страницы.
И в этот момент обязательно где-то на мобильных девайсах начнёт вылезать горизонтальная прокрутка. Чтобы уменьшить риски проблем при вёрстке страниц нужно использовать класс «text-break«.
А если у вас всё равно остаётся прокрутка при применении класса «text-break», тогда ищите незакрытый DIV или фантомные ПАДДИНГИ у других элементов разметки.
Где использовать класс «text-break» в Bootstrap?
Обязательно внедряйте его в заголовки от H1 до H6 т.к. они могут сильно увеличивать размеры текста. Также внедряйте в те элементы HTML-разметки, где могут накладываться другие классы Bootstrap, увеличивающие размеры шрифтов. Например класс «display-1» (2, 3 или 4).
