Is there a way to adjust the font-size to fit a fixed box without using css overflow?

Question

<div style="width : 50px"></div>

When the number of letters increases and leaves the area, Is there a way to automatically reduce the font size instead of css overflow?

Answer 1

I found this question interesting, so I'll provide a simple JavaScript example in case it helps somebody.

const div = document.querySelector('div');
const span = document.querySelector('span');


createDynamicTextbox(div, span);


function createDynamicTextbox(outer, inner) {
  if (!outer.style.fontSize) outer.style.fontSize = outer.clientHeight;
  const initialSize = +outer.style.fontSize.match(/\d+/)[0];

  inner.addEventListener('input', function(e) {
    let [n, unit] = outer.style.fontSize.split(/(?<![a-z])(?=[a-z]+)/);
    n=+n;

    while (outer.offsetWidth > inner.offsetWidth) {
      n++;
      outer.style.fontSize = n+unit;
      if (n >= initialSize) return;
    }

    while (inner.offsetWidth > outer.offsetWidth) {
      n--;
      outer.style.fontSize = n+unit;
      if (n <= 0) return;
    }
  });

  inner.dispatchEvent(new InputEvent('input'));
}

div {
  width: 100px;
  overflow: hidden;
  white-space: nowrap;
}

<div style="font-size: 30px"><span contenteditable>Edit Me</span></div>