1

I have an HTML text field that is 3 characters. If the user types 4 characters, I want the font size to shrink so that the four characters will fit.

Acrobat has this behavior for forms. I want this behavior in HTML.

That is, if I have a text field with 3 characters:

enter image description here

And the user types a 4, I want the text to shrink:

enter image description here

1
  • you can only do this with JS, there is such feature in html/css Commented May 12, 2019 at 12:24

3 Answers 3

5

You need to use javascript. This works by checking if the input can scroll, and if it can, it means that the content has overflowed, in which case the font size should get smaller.
Hope this helps!

function changefontsize() {
  var myInput = document.getElementById('myInput');
  if(isOverflown(myInput)) {
    while (isOverflown(myInput)){
    currentfontsize--;
    myInput.style.fontSize = currentfontsize + 'px';
    }
  }else {
    currentfontsize = 13;
    myInput.style.fontSize = currentfontsize + 'px';
    while (isOverflown(myInput)){
    currentfontsize--;
    myInput.style.fontSize = currentfontsize + 'px';
    }
  }	
}

function isOverflown(element) {
    return element.scrollWidth > element.clientWidth;
}
#myInput {
  padding:5px;
  border-radius:3px;
  font-family:Arial;
  width:100px;
  font-size:13px;
  height:20px;
}
Type Here -> <input type="text" id="myInput" onkeypress="changefontsize()" onchange="changefontsize()">

1
  • Thank you @jkrei0, even though there were still some edge cases, your idea was very good and based on that I was able to create a working example in React: codesandbox.io/s/relaxed-rosalind-ielb8o. I had been searching for the solution on SO and yours was the first one that solved the issue I needed
    – Son Nguyen
    Commented Nov 26, 2022 at 18:14
1

This is not possible with HTML/CSS - this solution uses JS+JQuery

Found this: https://github.com/vxsx/jquery.inputfit.js Demo: http://vxsx.github.io/jquery.inputfit.js/

<input type="text" name="younameit" id="input">
<script type="text/javascript">
    $('#input').inputfit();
</script>
1
  • Very much the simple solution! Thanks.
    – vy32
    Commented May 12, 2019 at 13:56
1

I think what you want can be done with some very simple javascript methods. But, unfortunately there is no method of doing this in html or css. This next code is something I found, made by u/adactio. On github.

<script>
  window.fitText( document.getElementById("responsive_headline") );
</script>

window.fitText( document.getElementById("responsive_headline"), 1.2 );
 // turn the compressor up (font will shrink a bit more aggressively)
window.fitText( document.getElementById("responsive_headline"), 0.8 ); 
// turn the compressor down (font will shrink less aggressively)

Make sure to edit the 'responsive_headline' out! Cheers!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.