Question

我在一行中有一个文本（white-space：nowrap）。如果它的宽度大于父块的宽度，我想减小该文本的字体大小。

我使用while循环。它为什么不起作用？宽度＆＃34; elemWidth＆＃34;没有更新并循环和循环冻结？

$('.slider__title-wrap').each(function(){
    var width = $(this).width();
    var fontSize = 50;
    var elem = $(this).find('.slider__title');
    var elemWidth = elem.width();

    while(elemWidth >= width) {
        fontSize = Math.floor(fontSize * 0.96);
        elem.css({fontSize: fontSize+'px'});
    };
})

Answer 1

var elemWidth = elem.width();

制作elem.width();

的副本

您需要重新评估elemWidth到您的循环中：

$('.slider__title-wrap').each(function(){
    var width = $(this).width();
    var fontSize = 50;
    var elem = $(this).find('.slider__title');
    var elemWidth = elem.width();

    while(elemWidth >= width) {
        fontSize = Math.floor(fontSize * 0.96);
        elem.css({fontSize: fontSize+'px'});
        elemWidth = elem.width();
    };
})

Answer 2

您似乎无法更改elemWidth循环中的width或while。所以它要么永远不会开始，要么永远不会结束。您需要在循环结束前更新您要比较的值：

$('.slider__title-wrap').each(function(){
    var width = $(this).width();
    var fontSize = 50;
    var elem = $(this).find('.slider__title');
    var elemWidth = elem.width();

    while(elemWidth >= width) {
        fontSize = Math.floor(fontSize * 0.96);
        elem.css({fontSize: fontSize+'px'});
        width = $(this).width();
        elemWidth = $(this).find('.slider__title').width();
    };
});

或者，消除变量，这样您就不必更新任何内容：

$('.slider__title-wrap').each(function(){
    var fontSize = 50;

    while($(this).width() >= $(this).find('.slider__title').width()) {
        fontSize = Math.floor(fontSize * 0.96);
        elem.css({fontSize: fontSize+'px'});
    };
});

顺便说一句，我使用fontSize = fontSize-1;而不是乘以0.96，但这可能是微优化。

为什么while循环不起作用？

2 个答案: