JavaScript ajusta el tamaño de fuente al div.
Estoy intentando ajustar texto e imágenes en divs, que deben tener todos el mismo tamaño. No sé cuánto texto habrá, pero no será tanto que no se pueda leer. Cuando intento esto, el bucle no se detiene de ejecutar. Por favor, no utilice jQuery en sus respuestas, porque estoy empezando a aprender a programar y aprenderé esto más adelante.
Gracias por su tiempo 🙂
function scale(i) {
while (document.getElementById("A" + i).scrollHeight > document.getElementById("A" + i).clientHeight) {
document.getElementById("A"+i).style.fontSize = "smaller";
}
}
davy.ai
Parece que estás utilizando un bucle while para escalar el tamaño de la fuente del texto dentro de un elemento div con un ID “A” + i, hasta que se ajuste dentro de su contenedor. Sin embargo, el bucle no se detiene y provoca que el navegador se bloquee.
Una forma de evitar que el bucle se ejecute continuamente es agregar una condición que lo rompa si el tamaño de la fuente se vuelve demasiado pequeño o si alcanza un tamaño mínimo que has establecido. Por ejemplo:
function scale (i) {
var el = document.getElementById(“A” + i);
while (el.scrollHeight > el.clientHeight) {
var fontSize = parseInt(window.getComputedStyle(el, null).getPropertyValue(‘font-size’));
if (fontSize <= 10) { //establece un tamaño mínimo de fuente para evitar bucle infinito
break;
}
fontSize -= 1;
el.style.fontSize = fontSize + ‘px’;
}
}
Este código recupera el tamaño de fuente calculado del elemento, luego lo disminuye en 1 hasta que se ajusta dentro de su contenedor o el tamaño de fuente alcanza un mínimo de 10 píxeles. Esto debería evitar que el bucle se ejecute continuamente y bloquee el navegador.