@belyaevcyrill

Как пропорционально уменьшать размер шрифта в зависимости от размера блока?

Есть некий блок (div) в виде карточки, допустим с размером 200px * 100px. В этом блоке при определенных условиях появляется текст, который генерируется серверным скриптом. Текст может быть разной длинны - либо одно слово, либо предложение от 3 до 10 слов. Естественно, что в некоторых случаях текст может не уместиться и может выходить за границы карточки.

Существует ли какая-нибудь математическая формула, чтобы с помощью JavaScript плавно и пропорционально уменьшать размер шрифта в зависимости от количества символов в таком блоке? Т.е. чем больше символов в тексте, тем меньше шрифт.

Update: Причем, интересует то, чтобы шрифт уменьшался не с каждым новым символом, а допустим с каждым новым словом (определенной длинны). Если же уменьшать шрифт с каждым новым символов, то, я думаю, текст с большим количеством символов станет совсем микроскопическим.

Примеры на картинках:

5f12dfc517a97651249154.png

5f12dfcc01348793231190.png

5f12dff179388135091228.png

Updated: нашел решение: пример и библиотека
  • Вопрос задан
  • 3085 просмотров
Решения вопроса 3
ArsenyMatytsyn
@ArsenyMatytsyn Куратор тега CSS
Руководитель frontend направления, предприниматель
текст, который генерируется серверным скриптом

Просто привяжи размер размер шрифта к количеству символов. На выходе можно при генерации HTML писать что-то типа:
<span style="font-size:<?= 200 / strlen($string) ?>"><?= $string ?>...


Формула абстрактная, тебе точную врядли кто-то даст, так как привязку надо делать к метрикам шрифтов и подбирать на глаз, но пример о расчетах на выходе вон он, выше. Язык для примера — PHP.
Ответ написан
Комментировать
@Lynatik001
Зачем такую ересь городить. Юзайте размер текста в % или rem
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы