Сделать перенос каждого слова на новую строку CSS

Иногда дизайн требует, чтобы все слова заголовка или слогана были с новой строки. Можно добавить <br /> после каждого слова, но можно и обойтись изменениями в CSS.

Трюк очень прост, мы задаём достаточно большой разрыв между словами, чтобы гарантировано осуществить перенос на следующую строку:

Т.к. мы не можем задать разрыв в процентах, то воспользуемся другими относительными единицами — vw, и установим его равным 100% ширины устройства.

Мало букафф? Читайте есчо !

Квантование ширины: способ балансировать текст в кнопках на CSS

Сентябрь 25, 2025 г.

Иногда кнопки на сайте содержат очень разный по длине текст. С коротким текстом всё просто: он помещается в одну строку и выглядит аккуратно. Но как только ...

Читать

Простые CSS анимации, которые оживят ваш сайт

Апрель 14, 2025 г.

Иногда даже одно лёгкое движение может сделать сайт запоминающимся. Не нужно быть мастером фронтенда, чтобы добавить немного магии в интерфейс — иногда достаточно пары строк CSS. Простые анимации делают сайт динамичным, визуально приятным и интуитивно ...

Читать

Анимация ожидания загрузки/обновления, используя CSS3

Октябрь 26, 2015 г.

Одна из типичных задач для улучшения пользовательского интерфейса на сайтах - это визуализация ожидания загрузки/обновления страницы. Наиболее частый случай ...

Читать

Кол-во знаков после запятой при генерации css препроцессором sass

Март 28, 2018 г.

В одном из проектов использовался SASS, но оказалось, что у другого разработчика другие настройки SASS. И конечные CSS генерировались с числами другой точности (другое кол-во знаков после запятой). Любое изменение в файле приводило к огромному ...

Читать
 

Комментарии к «Сделать перенос каждого слова на новую строку CSS»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: