<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?
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>