Jquery添加尽可能多的跨度来填充div

Question

I have an HTML div `

<div class="words_padding">

</div>

That is 800px and i have got this jquery array

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"];

I want to fill that div with as many spans as that div can take without getting out of borders.
I have tried doing it with for like this

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

But some words are longer than other ones so it goes out of borders Jsfiddle: https://jsfiddle.net/2yxvg5ye/2/

Answer 1

I think this is simple enough.. The JS is as follows:

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;
        }
    }
});

Updated JSFiddle: https://jsfiddle.net/2yxvg5ye/4/

Answer 2

Here's what I propose:

<div class="words_padding" style="width: 800px;">

</div>

<div style="display: none;" id="hid"></div>

The div #hid is a tool for the script to come, hence its display: none; .

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"];


$(".words_padding").append("<span class=\"words_totp\">"+ w +"</span>");
var aux=1;
while (aux==1){
    var w = words[Math.floor((Math.random() * words.length))];
    $("#hid").append("<span class=\"words_totp\">"+ w +"</span>");       if($(".words_totp").last().position().left+$(".words_totp").last().outerWidth()+$("#hid").find(">:first-child").outerWidth()<=800){
        $(".words_padding").append($("#hid")[0]);
        $("hid").empty();
    }else{
        aux=0;
    }   
}

Works for me! Not the cleanest way, but seems to do the job. Let me know if you have questions :)

Answer 3

I got close, but for the life of me can't figure out why this takes two clicks of the button to work. That being said, if you can solve that issue, then you should be good to go.

What this does is call a function to randomize the list of words, then appends all of them to the div, but they default to display:none;

It then goes through all the span elements added and does the math to see if the width is less than the container. If it is, then it will fadeIn() a span element, until the max width is reached.

  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"]; function shuffle(array) { var currentIndex = array.length, temporaryValue, randomIndex; // While there remain elements to shuffle... while (0 !== currentIndex) { // Pick a remaining element... randomIndex = Math.floor(Math.random() * currentIndex); currentIndex -= 1; // And swap it with the current element. temporaryValue = array[currentIndex]; array[currentIndex] = array[randomIndex]; array[randomIndex] = temporaryValue; } return array; } $('body').on('click', '.Start_tp', function(event) { event.preventDefault(); words = shuffle(words); var maxWidth = $('.words_padding').width(); var width = 0; $(words).each(function(i) { $('.words_padding').append("<span class=\\"words_totp\\" style='display:none;'>" + words[i] + "</span>"); $('.words_padding span').each(function() { width = width + $(this).outerWidth(); if (width < maxWidth) { $(this).fadeIn(); } }); }); }); 

 .words_totp { font-size: 38px; color: gray; padding-left: 10px; padding-right: 10px; font-family: monospace; } .words_padding { word-break: break-word; margin-left: 12px; margin-top: 10px; background: white; width: 800px; position: relative; left: 25px; height: 70px; } .Start_tp { font-size: 30px; border: 0; background: #03a9f4; padding: 5px; color: white; position: relative; top: 100px; left: 100px; width: 200px; cursor: pointer; outline: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="words_padding"></div> <input type="button" class="Start_tp" value="Start"> 

Here is a fiddle as well: https://jsfiddle.net/8k44gvrm/1/