Quiero reducir el tamaño de fuente del texto hasta que el texto tenga algo de altura (en el ejemplo, 54 px). Pero el script hace esto solo 1 vez (lee la altura solo por carga y ya no). No puedo repetir esto.
https://jsfiddle.net/Nata_Hamster/zpvhow68/
$(document).ready(function() { let fact1 = $('div'); let fact1_h = fact1.height(); let fact_fs = parseInt($('div').css('font-size')); alert(fact_fs); if (fact1_h > 54) { fact_fs -= 1; fact1.css({ 'font-size': fact_fs + 'px' }); alert(fact_fs); fact_fs = parseInt($('div').css('font-size')); } }); div { width: 200px; padding-left: 20px; padding-right: 20px; font-size: 20px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <div>JavaScript (JS) is a lightweight, interpreted, or just-in-time compiled programming language with first-class functions. </div>Necesita hacer un bucle, pero también debe darle tiempo a la interfaz para que se ajuste
$(function() { const fact1 = $('div'); const tID = setInterval(function() { let fact1_h = fact1.height(); let fact_fs = parseInt($('div').css('font-size')); if (fact1_h <= 54) { clearInterval(tID) return } fact_fs -= 1; fact1.css({ 'font-size': fact_fs + 'px' }); }, 10); }) div { width: 200px; padding-left: 20px; padding-right: 20px; font-size: 20px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <div>JavaScript (JS) is a lightweight, interpreted, or just-in-time compiled programming language with first-class functions. </div>Puede usar la declaración while que ejecutará la declaración dada siempre que la condición dada sea verdadera.
$(document).ready(function() { let fact1 = $('div'); let fact1_h = fact1.height(); let fact_fs = parseInt($('div').css('font-size')); console.log('Initial font size', fact_fs); while (fact1_h > 54) { fact_fs -= 1; fact1.css({ 'font-size': fact_fs + 'px' }); fact1_h = fact1.height(); console.log('New Font - ', fact_fs); console.log('New Height - ', fact1_h); } }); div { width: 200px; padding-left: 20px; padding-right: 20px; font-size: 20px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <div>JavaScript (JS) is a lightweight, interpreted, or just-in-time compiled programming language with first-class functions. </div>