为什么while循环不起作用？

Question

I have a text in a single line (white-space: nowrap). I want to reduce the font size of this text if the width of it greater than the width of the parent-block.

I use while loop. Why it doesn't work? Width of "elemWidth" is not updated and loop and the cycle freeze?

$('.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();

makes a copy of elem.width();

You need to reevaluate elemWidth into your loop :

$('.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

You don't seem to be changing either elemWidth or width inside the while loop. So it will either never start, or never end. You need to update the values you're comparing before the loop ends:

$('.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();
    };
});

Alternatively, eliminate the variables so you don't have to update anything:

$('.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'});
    };
});

Incidentally, I'd use fontSize = fontSize-1; instead of multiplying by 0.96 , but it's probably a micro-optimization.