在循环中更改字体大小以适应高度答案

【问题标题】：Change font size in a loop to fit height在循环中更改字体大小以适应高度
【发布时间】：2021-02-12 18:49:48
【问题描述】：

当 Bootstrap 轮播的容器高度高于 150 像素时，我正在尝试减小字体大小。

<div class="carousel-item">
 <div class="carousel-caption d-block">
  <h3><a href="#">Title</a></h3>
 </div>
</div>


$('#crsPos3,#crsPos4').on('slid.bs.carousel', function () {
        fixFontSize($(this)); 
})    

function fixFontSize(obj) {
        $(obj).find('h3').each(function () {
            a = $(this).find('a');
            var i = 0;
            while ($(this).outerHeight() > 150 && i < 1000) {
                var fs = parseInt($(a).css('font-size'));
                fs = (fs - 1) + 'px';
                $(a).css('font-size', fs);
                console.log($(obj).attr('id') + ' ' + fs);
                i=i+1;
            }
        });
    }

我使用 var i 来避免过载，但它每次只减少 1 个像素。控制台显示 (1000) crsPos4 21px

谢谢

【问题讨论】：

请用minimal reproducible example 更新您的问题以证明问题，最好是使用堆栈片段（[<>] 工具栏按钮）可运行的问题； here's how to do one.
这里有一些可能的解决方案：stackoverflow.com/search?q=css+font+height+to+fit
您的code appears to work fine。在slid.bs.carousel 事件触发后会不会发生其他事情？在您的 fixFontSize 末尾添加一条警报以停止处理以查看您的代码已完成的操作，然后查看之后是否有任何变化

标签： javascript jquery font-size

【解决方案1】：

我找到了解决方案！也许，jquery 函数 .css 是异步的，这就是为什么 div 没有改变它的高度。添加暂停以调用功能有效：

function fixFontSize(obj) {
$(obj).find('h3').each(function () {
if ($(this).outerHeight() > 150) { 
$(this).find('a').css({ fontSize: function (i, v) { return parseInt(v) - 1; } }); setTimeout(function () { fixFontSize(obj); }, 10); } }); }

【讨论】：