Adjust font size

by ckissi

HTML

<div id="container">
   This is the text in the box. So make it smaller cool!
</div>

CSS

#container {
   background-color:red;
   height:100px;
   width:200px;
   font-size:40px;
   //overflow:hidden;
   padding:10px;
}

JavaScript

function adjustFontSize(elementId) {
  const element = document.getElementById(elementId);
  const maxWidth = element.offsetWidth;
  const maxHeight = element.offsetHeight;

  let fontSize = 100; // initial font size in pixels
  let textWidth, textHeight;

  do {
    fontSize--;
    element.style.fontSize = fontSize + 'px';

    textWidth = element.scrollWidth;
    textHeight = element.scrollHeight;
  } while ((textWidth > maxWidth || textHeight > maxHeight) && fontSize > 0);
}

// Usage
adjustFontSize('container');