それはDIV

Question

を埋めるために取るようjqueryのは、私が800ピクセルであると私は私が記入したい、この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"]; 

を持っているHTMLのdiv `

<div class="words_padding"> 

</div> 

を持っているなど、多くのスパンを追加その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は次のとおりです。

JSFiddle更新

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

：https://jsfiddle.net/2yxvg5ye/4/を

Answer 2

は、ここで私が提案しているものです：

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

</div> 

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

div #hidはスクリプトのツールです。そのため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！最もクリーンな方法ではなく、仕事をするようです。あなたが質問がある場合私に教えてください:)

Answer 3

私は近づいてきましたが、私の人生のために、これがなぜボタンの2回のクリックが働くのか分かりません。それが言われている、あなたがその問題を解決することができれば、あなたは行かなくてはなりません。これは何

はその後のdivにそれらのすべてを追加し、単語のリストをランダム化する関数を呼び出しているが、彼らはdisplay:none;

それは、その後追加されたすべてのspan要素を通過にデフォルト設定と数学へを行います幅がコンテナよりも小さいかどうかを確認してください。そうであれば、最大幅に達するまで、fadeIn()スパン要素になります。ここで

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

 
\t function shuffle(array) { 
 
\t var currentIndex = array.length, 
 
\t  temporaryValue, randomIndex; 
 

 
\t // While there remain elements to shuffle... 
 
\t while (0 !== currentIndex) { 
 

 
\t  // Pick a remaining element... 
 
\t  randomIndex = Math.floor(Math.random() * currentIndex); 
 
\t  currentIndex -= 1; 
 

 
\t  // And swap it with the current element. 
 
\t  temporaryValue = array[currentIndex]; 
 
\t  array[currentIndex] = array[randomIndex]; 
 
\t  array[randomIndex] = temporaryValue; 
 
\t } 
 

 
\t return array; 
 
\t } 
 
\t $('body').on('click', '.Start_tp', function(event) { 
 
\t event.preventDefault(); 
 
\t words = shuffle(words); 
 
\t var maxWidth = $('.words_padding').width(); 
 
\t var width = 0; 
 

 
\t $(words).each(function(i) { 
 
\t  $('.words_padding').append("<span class=\"words_totp\" style='display:none;'>" + words[i] + "</span>"); 
 
\t  $('.words_padding span').each(function() { 
 
\t  width = width + $(this).outerWidth(); 
 
\t  if (width < maxWidth) { 
 
\t   $(this).fadeIn(); 
 
\t  } 
 
\t  }); 
 

 
\t }); 
 
\t });

.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">

にもフィドルです：https://jsfiddle.net/8k44gvrm/1/