Иногда дизайн требует, чтобы все слова заголовка или слогана были с новой строки. Можно добавить <br /> после каждого слова, но можно и обойтись изменениями в CSS.
Трюк очень прост, мы задаём достаточно большой разрыв между словами, чтобы гарантировано осуществить перенос на следующую строку:
|
|
.my-text { word-spacing: 100vw; } |
Т.к. мы не можем задать разрыв в процентах, то воспользуемся другими относительными единицами — vw, и установим его равным 100% ширины устройства.
Данная запись опубликована в 29.05.2023 15:43 и размещена в рубрике Танцы с CSS.
Вы можете перейти в конец страницы и оставить ваш комментарий.
Мало букафф? Читайте есчо !
Апрель 20, 2017 г.
3я версия Bootstrap определяет 4 размера сетки: <768px, ≥768px, ≥992px, ≥1200px. Этих размерностей явно не достаточно.
В то время как на телефонах ...
Читать
Август 29, 2019 г.
Небольшие векторные элементы очень удобно вставлять как часть CSS кода. Хочу показать пример, как сделать их еще и параметрически зависимыми, при компиляции из LESS.
К примеру, при ребрендинге или использовании кусочка стилей на другом сайте, вы ...
Читать
Май 13, 2018 г.
Во время ввода в текстовом поле IE появляется "крестик", который позволяет очистить поле в один клик. Иногда стиль, и вообще наличие этого крестика, не ...
Читать
Май 2, 2021 г.
В третей версии бутстрапа используется выравнивание элементов сетки col-* с помощью свойства float: left;. Пока элементы в сетке имеют одинаковую высоту, ...
Читать