javascript - Jquery 添加尽可能多的跨度来填充一个 div

Question

我有一个 HTML div `

<div class="words_padding">

</div>

那是 800px，我有这个 jquery 数组

var words=["thing","my","low","life","that","repeat","his","meaning","if","she","he","never","tell","part","tubes","how","should","come","off","on","it","about","me","and","do","same","put","country","math","like"];

我想在不超出边界的情况下用尽可能多的跨度填充该 div。
我已经尝试过这样做

    for (var i = 0; i <= 8; i++) {
        $('.words_padding').append("<span class=\"words_totp\">"+words[Math.floor((Math.random() * words.length))]+"</span>");
    }

但是有些单词比其他单词长，所以它超出了边界 Jsfiddle:https://jsfiddle.net/2yxvg5ye/2/

Answer 1

我觉得这很简单.. JS如下:

var words=["thing","my","low","life","that","repeat","his","meaning","if","she","he","never","tell","part","tubes","how","should","come","off","on","it","about","me","and","do","same","put","country","math","like"];
$('body').on('click', '.Start_tp', function(event) {
    event.preventDefault();
    var $newWord, $wrapper = $('.words_padding'), canLoop = true, totalWidthsUsed = 0;
    while (canLoop) {
        $newWord = $("<span class=\"words_totp\">"+words[Math.floor((Math.random() * words.length))]+"</span>");
        $wrapper.append($newWord);
        $newWord = $wrapper.find('.words_totp').last();
        totalWidthsUsed += $newWord.outerWidth();
        if(totalWidthsUsed > 800) {
           $newWord.remove();
           canLoop = false;
        }
    }
});

更新的 JSFiddle:https://jsfiddle.net/2yxvg5ye/4/