Иногда дизайн требует, чтобы все слова заголовка или слогана были с новой строки. Можно добавить <br /> после каждого слова, но можно и обойтись изменениями в CSS.
Трюк очень прост, мы задаём достаточно большой разрыв между словами, чтобы гарантировано осуществить перенос на следующую строку:
|
|
.my-text { word-spacing: 100vw; } |
Т.к. мы не можем задать разрыв в процентах, то воспользуемся другими относительными единицами — vw, и установим его равным 100% ширины устройства.
Данная запись опубликована в 29.05.2023 15:43 и размещена в рубрике Танцы с CSS.
Вы можете перейти в конец страницы и оставить ваш комментарий.
Мало букафф? Читайте есчо !
Май 13, 2018 г.
Во время ввода в текстовом поле IE появляется "крестик", который позволяет очистить поле в один клик. Иногда стиль, и вообще наличие этого крестика, не ...
Читать
Март 29, 2016 г.
Для центровки блока средствами CSS оперируют его внешними отступами.
К примеру, такой CSS код будет центрировать контейнер DIV внутри родительского.
[crayon-697f6e63898b0026301728/]
Ключевым является значение auto для левого и правого отступов. ...
Читать
Апрель 14, 2025 г.
Иногда даже одно лёгкое движение может сделать сайт запоминающимся. Не нужно быть мастером фронтенда, чтобы добавить немного магии в интерфейс — иногда достаточно пары строк CSS. Простые анимации делают сайт динамичным, визуально приятным и интуитивно ...
Читать
Июнь 21, 2020 г.
Небольшая тулза по конвертации SVG картинок в CSS backgroung-image код.
Рекомендую предварительно произвести оптимизацию изображения, убрать лишние/невидимые слои, маркеры программ редакторов SVG, лишние теги и т.п.
Вы можете загрузить SVG в ...
Читать