<div style="width : 50px"></div>
Cuando el número de letras aumenta y sale del área, ¿hay alguna forma de reducir automáticamente el tamaño de la fuente en lugar del desbordamiento de css?
Encontré esta pregunta interesante, así que proporcionaré un ejemplo simple de JavaScript en caso de que ayude a alguien.
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(/(?<![az])(?=[az]+)/); 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>