Иногда дизайн требует, чтобы все слова заголовка или слогана были с новой строки. Можно добавить <br /> после каждого слова, но можно и обойтись изменениями в CSS.
Трюк очень прост, мы задаём достаточно большой разрыв между словами, чтобы гарантировано осуществить перенос на следующую строку:
|
|
.my-text { word-spacing: 100vw; } |
Т.к. мы не можем задать разрыв в процентах, то воспользуемся другими относительными единицами — vw, и установим его равным 100% ширины устройства.
Данная запись опубликована в 29.05.2023 15:43 и размещена в рубрике Танцы с CSS.
Вы можете перейти в конец страницы и оставить ваш комментарий.
Мало букафф? Читайте есчо !
Октябрь 22, 2017 г.
Замечательные псевдо-классы, которые позволяют добавить виртуальные контейнеры в начало или конец контейнера. Как они работают и почему могут "не сработать"? ...
Читать
Январь 11, 2019 г.
Сайт, где вы найдете конструкторы анимации прогресс баров - loading.io. Я бы сказал налетай, подешевело, но всё абсолютно даром.
Основная особенность ...
Читать
Март 26, 2025 г.
Я замечал, что медиа запросы могут не срабатывать на границе т.н. брек-поинтов.
К примеру, следующее правило может не срабатывать при значении 767 пикс:
[crayon-69706da9880eb139871244/]
Источниками проблем являются фича масштабирования и ...
Читать
Октябрь 19, 2015 г.
Очень простая мулька, но выглядит при соответствующем фоне потрясающе. Сделаем так, чтобы при скроллинге страницы, фон двигался вдвое медленнее, создавая что то вроде эффекта параллакса.
Этот кусочек скрипта привязывает нас к событию onscroll окна. ...
Читать