0

I have an input where the user can enter a number and I have a div with a fixed width which outputs the user entered value so I am seeking a way to make the font size get smaller when it consumes the containers width. is this possible ? if not is there any other idea to handle this case

mahmoudamer
  • 51
  • 1
  • 1
  • 4
  • 2
    Does this answer your question? [dynamically changing the size of font size based on text length using css and html](https://stackoverflow.com/questions/18229230/dynamically-changing-the-size-of-font-size-based-on-text-length-using-css-and-ht) – JD Davis Feb 09 '20 at 17:10
  • Also this: https://stackoverflow.com/questions/15649244/responsive-font-size-in-css – some user Feb 09 '20 at 17:11

2 Answers2

2

You can this with CSS. You can give font-size value in vw or in pixels. For example:

p {
  font-size:2vw;
}

or

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

or simply use media queries.

Igor F.
  • 2,649
  • 2
  • 31
  • 39
Aware Fun
  • 77
  • 5
0

I suppose you can do something like this: 

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;
}

Or you can like make it 1 font-size smaller for each extra number there are:

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;

}