Автоматически отрегулировать размер шрифта, чтобы текст влезал в div
Есть div, который создается динамически. Этот div создается поверх картинки, поэтому его позиция в absolute, и его высота и ширина, а так позиция - в процентах, чтобы не двигаться относительно картинки.
<div style="font-size: 17px; color: black; background-color: white; position: absolute; bottom: @coordY;left: @coordX; transform: translate(-50%, 50%); width: @width; height: @height">@texts.Text</div>
Вопрос в следующем - как сделать так, чтобы текст всегда точно влезал в div? Чтобы его font-size регулировался в зависимости от количества текста и размеров div?
К примеру - текста 100 символов, размер div - 5% на 10%, и оно вычисляет font-size, чтобы все 100 символов влезли в этот div 5% на 10%, и это сохраняется при изменении размера окна браузера.
Вроде бы fit-content должен делать что-то похожее, но судя по офф докам https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content
это скорее ресайзит размер родительского элемента, чтобы в него влезли все дочерние. Мне же нужно наоборот - дочерний впихнуть в родительский, посредством подгонки размера шрифта.