Можно ли подогнать ширину строки под размер контейнера?

Question

[Сергей]

Существуют ли способы сделать ширину строки равной ширине контейнера не прибегая к js?
Важный нюанс: ширина контейнера фиксированная, строка же может содержать разное количество символов (при таком поведении короткий текст увеличивается в размерах, а длинный соответственно уменьшается).

Update. Можно что-то подобное сделать с использованием svg, но при разном количестве символов текст непропорционально растягивается по вертикали: jsfiddle. Может есть способ этого избежать?

Comments

[Froggyweb]

Только на js чтото типа fittext.js но это достаточно затратно по ресурсам если будет много таких блоков

[Rustam Bainazarov]

Можно на vw делать размер шрифта.

Но нужно точно знать количество символов заранее.

[Froggyweb]

Рустам Байназаров, я бы такого врагу не пожелал бы. как то поэкспериментировал - это ад на мой взгляд.

[Rustam Bainazarov]

Froggyweb, ну, человеку же надо :))

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

Answer 1

[Максим Морев]

CSS - декларативная штука, а мы не знаем количество символов в строке и соответственно не можем задать нужный размер текста.
Так что нет, без JS задача не решается. Когда мне крайний раз надо было - использовал fitty, работает без нареканий.

Answer 2

[Kizzeon]

Можно прописать vw для контейнера и для текста. Ещё контейнеру дописать min-width что бы всегда умещался текст
Тогда при уменьшении документа контейнер и текст будут выглядеть одинаково.