Как растянуть текст по ширине в css

font-stretch¶

Свойство font-stretch устанавливает узкое, нормальное или широкое начертание шрифта, что позволяет уплотнять или расширять текст.

Синтаксис¶

Значения¶

Влияние разных значений font-stretch на вид букв в тексте показано на рис. 1.

Рис. 1. Вид букв при разных значениях font-stretch

Примечание¶

Браузеры применяют свойство font-stretch не ко всем шрифтам, поэтому уплотнение или расширение текста может не работать с некоторыми популярными и распространёнными гарнитурами шрифтов.

Выровнять текст, картинки или блоки div по ширине | text-align-last | CSS

Обратили внимание, что текст на последней строке не растягивается по всей ширине? А если строка всего одна, то она и будет последней. Вот тут и пригодиться свойство text-align-last. Оно управляет только поведением крайней строки абзаца.

Поддержка браузерами ограничена, но можно немного пошаманить:

Как выровнять картинки по ширине

пузырькипузырькипузырькипузырьки

Как равномерно распределить блоки, если сайт резиновый

Вот возможности, которые предоставляют float: left; и display: table;. В данном примере если блоки не помещаются, то переходят на новую строку. flexbox всё же предоставляет больше возможностей.

Смайлик большой палец вверх Древний российский город Аркаи́мДревний российский город Аркаи́м Весёлый паровозикВесёлый паровозик УраУра

Растянуть текст по длине блока

Есть несколько способов растянуть текст по ширине блока или страницы адаптивным образом.

1. Использование css-трансформации scale

Данный код позволяет менять размер шрифта в зависимости от ширины браузера:

Немного доработав код, вы можете растянуть текст не только на всю длину страницы, но и на длину конкретного блока.

2. Использование параметра font-size

Есть ещё другой способ заставить шрифт растягиваться по длине блока:

Метод основан на использовании css-параметра font-size . Параметром k подгоняется шрифт под размеры блока. Имейте ввиду, что значение font-size , выраженный в процентах, вычисляется не от ширины блока, а от размера шрифта родительского блока, поэтому параметр k подгоните под себя.

3. Использование svg

Данный способ хорош тем, что не нужно использовать javascript. В данном пункте приведу более сложный пример использования svg: будем использовать многострочный текст, выравненный по центру.

Добавляем svg-код на страницу html:

Смысл такого способа в том, что мы растягиваем наш svg на всю ширину блока, используя width="100%" , а для каждого текстового элемента задаём перемещение по оси X в 50%, и наконец, добавляем text-anchor: middle; для выравнивания текста относительно заданного перемещения по оси X. Опять таки, и здесь нужна подгонка параметром.

В каждом представленном способе есть свои плюсы и минусы. Однозначно точно растянуть текст по ширине, как вы видите, не получится. Придётся всё равно подгонять размер шрифта под длину блока. Но тем не менее, подогнав размер под свой блок, вы получите резиновый текст, который адаптируется под различные устройства.

Если же вы хотите точно подогнать шрифт по длине блока, то используйте текст как картинку. Конечно, это извращение, и имеет смысл использовать это при крайней необходимости.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *