Иногда дизайн требует, чтобы все слова заголовка или слогана были с новой строки. Можно добавить <br /> после каждого слова, но можно и обойтись изменениями в CSS.
Трюк очень прост, мы задаём достаточно большой разрыв между словами, чтобы гарантировано осуществить перенос на следующую строку:
|
|
.my-text { word-spacing: 100vw; } |
Т.к. мы не можем задать разрыв в процентах, то воспользуемся другими относительными единицами — vw, и установим его равным 100% ширины устройства.
Данная запись опубликована в 29.05.2023 15:43 и размещена в рубрике Танцы с CSS.
Вы можете перейти в конец страницы и оставить ваш комментарий.
Мало букафф? Читайте есчо !
Декабрь 27, 2017 г.
Оформление элементов формы - это старая проблема. Ситуация несомненно улучшается, но финала пока не видно. С появлением псевдо-контейнеров :after и :before ...
Читать
Сентябрь 3, 2021 г.
Мы рассмотрим здесь как обрезать текст и добавить многоточие средствами CSS. Это еще одна классическая проблема фронт-енда, как не позволить тексту менять геометрию контейнера, если он не влазит целиком.
CSS предоставляет специальное свойство для ...
Читать
Май 2, 2025 г.
Когда пользователь нажимает кнопку, полезно дать тактильную обратную связь — например, слегка "прижать" её визуально. Такой эффект достигается с помощью изменения масштаба (scale) и вертикального смещения (translateY).
Это статья из цикла заметок по ...
Читать
Март 26, 2025 г.
Я замечал, что медиа запросы могут не срабатывать на границе т.н. брек-поинтов.
К примеру, следующее правило может не срабатывать при значении 767 пикс:
[crayon-69920ca6ddab2871977084/]
Источниками проблем являются фича масштабирования и ...
Читать