как сделать текст отзывчивым на свой контейнер?

Question

У меня есть ввод, где пользователь может ввести число, и у меня есть div с фиксированной шириной, который выводит введенное пользователем значение, поэтому я ищу способ уменьшить размер шрифта, когда он использует ширину контейнеров. Это возможно ? если нет, то есть ли другая идея разобраться с этим делом

Answer 1

Вы можете сделать это с помощью CSS. Вы можете указать размер шрифта в vw или в пикселях. Например:

p {
  font-size:2vw;
}

или

p {
  height:200px;
  width:200px;
}

или просто используйте медиазапросы.

Answer 2

Полагаю, вы можете сделать что-то вроде этого:

var x = //Test the amount of numbers the container has room for and make this x
if (numberInContainer.length > x) {
container.style.font-size = container.style.font-size - 1;
}

Или вы можете уменьшить размер шрифта на 1 для каждого дополнительного числа:

var x = //Test the amount of numbers the container has room for and make this x

if (numberInContainer.length > x) {

var extraNumbers = numberInContainer.length - x;
container.style.font-size = container.style.font-size - extraNumbers;

}