Responsive Text in Inputfield

I have an input field and in this I add values via JavaScript. How can I do it, if my input field is "full" at for example 30 characters, that the font will be smaller, so that everything is always visible?

input {
  height:50px;
  width:200px;
  font-size:20px;
  padding:5px;
}

<input type="text">