如何循环执行JS脚本调整字体大小，直到指定元素高度达到54px

你当前代码的问题是仅使用了单次if判断，只会执行1次字体缩小操作，无法持续调整到高度符合要求，将判断逻辑替换为循环即可实现需求。

修正后的完整代码 #

JS代码 #

$(document).ready(function() {
  const fact1 = $('div');
  let fact_fs = parseInt(fact1.css('font-size'));
  const minFontSize = 10; // 加最小字号兜底，避免无限缩小

  // 用while循环持续调整，直到高度<=54px或到达最小字号
  while (fact1.height() > 54 && fact_fs > minFontSize) {
    fact_fs -= 1;
    fact1.css('font-size', fact_fs + 'px');
  }
});

CSS代码（无修改） #

div {
  width: 200px;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 20px;
}

HTML代码（无修改） #

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

修改说明 #

• 将单次执行的if判断替换为while循环，只要div高度超过54px就持续缩小字号
• 新增最小字号限制，避免内容过长时出现字号无限缩小甚至变为负数的异常情况
• 每次修改字号后自动读取最新的元素高度，用于下一轮循环的判断条件

内容的提问来源于stack exchange，提问作者user9223748