Как вписать текст по его размеру в блок div?

Question

[Alex]

Есть блок допустим размером 400х400px с текстом, как сделать так чтобы при увеличении блока или уменьшении, регулировался размер текста. Чтобы в итоге текст выглядел точно так же просто изменился размер, так же как если бы это был текст написан на изображении и оно бы просто пропорционально уменьшалось и увеличивалось.
Кто нибудь реализовывал ли подобное при помощи CSS, ну или хотя бы JS?! Если да то как или какие есть идеи как реализовать подобное?

Comments

[Ankhena]

В общем случае плагины типа fit text.
А в частных зависит от того за счет чего увеличивается блок.
Если размер блока зависит от вьюпорта, то и для текста можно использовать vw. Можно в сочетании с clamp, если у контейнера тоже есть ограничения.

[iljaGolubev]

https://css-tricks.com/fitting-text-to-a-container/

[Максим]

На css такого поведения не добиться

Answer 1

[Евгений Механиков]

Добрый день,

самое простое сделать текст внутри SVG как тут, например
https://codepen.io/chriscoyier/pen/zaRxdm

Всего самого наилучшего, надеюсь помог