各単語の幅を定義し、自動的にタイトルを作成します

Question

私は自動的に方法を探しています はjavascriptを使用して文章を作成します。ここで

この文を使用した例です。
、そして、私はようやくようにするための単語幅
に をdependind変更するには、ブロックサイズを希望 «ここにも構成驚くべき文です» これまでのところ、文章を単語で切り取る方法しか見つけられませんでした。
それぞれの幅に応じて、どのように各単語/テキストブロックの幅を定義できますか？

function wordsinblocks() { 
 
    var str = document.getElementById("demo").innerHTML; 
 
    var res = str.split(" "); 
 
    document.getElementById("demo").innerHTML = res; 
 
}

body{ 
 
    font-family:"helvetica"; 
 
    font-size: 40px; 
 
    } 
 
p {border: 1px solid black;}

<button onclick="wordsinblocks();">Design the sentence</button> 
 
<p id="demo">Here is an amazing sentence well composed</p>

Answer 1

関連するグリッドサイズを適用するために見つけた実装です。あなたは幅が彼らのワード幅に依存して、各単語のdivを持ちたい

function wordsinblocks(self) { 
 
    var demo = document.getElementById("demo"), 
 
     initialText = demo.textContent, 
 
     wordTags = initialText.split(" ").map(function(word){ 
 
      return '<span class="word">' + word + '</span>'; 
 
     }); 
 
    
 
    demo.innerHTML = wordTags.join(''); 
 
    self.disabled = true; 
 
    fitWords(); 
 
    window.addEventListener('resize', fitWords); 
 
} 
 

 
function fitWords(){ 
 
    var demo = document.getElementById("demo"), 
 
     width = demo.offsetWidth, 
 
     sizes = [10,30,50, 100], 
 
     calculated = sizes.map(function(size){return width*size/100}), 
 
     node, 
 
     i, 
 
     nodeWidth, 
 
     match, 
 
     index; 
 
    
 
     
 
    for (i=0;i<demo.childNodes.length;i++){ 
 
     node = demo.childNodes[i]; 
 
     node.classList.remove('size-1','size-2','size-3','size-4'); 
 
     
 
     nodeWidth = node.clientWidth; 
 
     match = calculated.filter(function(grid){ 
 
     return grid >= nodeWidth; 
 
     })[0]; 
 
     index = calculated.indexOf(match); 
 
     
 
     
 
     node.classList.add('size-' + (index+1)); 
 
    } 
 
}

#demo{ 
 
    display:block; 
 
    padding:0 0 0 1px; 
 
    overflow:auto; 
 
} 
 

 
#demo .word{ 
 
    float:left; 
 
    box-sizing:border-box; 
 
    padding:5px; 
 
    border:1px solid #999; 
 
} 
 

 
#demo .size-1{width:10%} 
 
#demo .size-2{width:30%} 
 
#demo .size-3{width:50%} 
 
#demo .size-4{width:100%}

<button onclick="wordsinblocks(this);">Design the sentence</button> 
 
<p id="demo">Here is an amazing sentence well composed</p>

Answer 2

あなたが戻っHTMLであなたの言葉を入れる前に、スパンに各単語をラップし、スパンのスタイル。これはスパンをどのように設計するかの一部に過ぎません。文字数に基づいてグリッドクラスを追加することができます。

グリッドクラスのスタイルを記述していないため、表示されませんのでご注意ください。

function wordsinblocks() { 
 
    var str = document.getElementById("demo").innerHTML; 
 
    var res = str.split(" "); 
 

 
    for (var x in res) { 
 
     var l = res[x].length; 
 
     var className = "grid-1"; 
 

 
     switch(true) { 
 
      case (l < 3): 
 
      className = "grid-1"; 
 
      break; 
 
      case (l > 2 && l < 5): 
 
      className = "grid-2"; 
 
      break; 
 
      // and so on until you get all cases you wish to cover 
 
      default: // and finally longer words would have the widest column class 
 
      className = "grid-4"; 
 
      break; 
 
     } 
 

 
     res[x] = '<span class="word-item ' + className + '">' + res[x] + '</span>'; 
 
    } 
 

 
    document.getElementById("demo").innerHTML = res.join(""); 
 
}

body{ 
 
    font-family:"helvetica"; 
 
    font-size: 40px; 
 
    } 
 
p span.word-item {border: 1px solid black; padding: 0 0.5em; box-sizing: border-box; display: inline-block;}

<button onclick="wordsinblocks();">Design the sentence</button> 
 
<p id="demo">Here is an amazing sentence well composed</p>

Answer 3

何、このようなものでしょうか？結果は、完全にあなたの写真を表していない可能性がありますが、それは、各単語の長さを計算し、それに応じてクラスを適用ん：ここで

$("p span").each(function() { 
 
    // get length of word characters 
 
    var l = $(this).text().length; 
 
    // apply 10 percent class if equal or to less than 2 characters 
 
    if (l <= 2) { 
 
    $(this).addClass('p10'); } 
 
    // apply 30 percent class if equal or to less than 5 characters 
 
    else if (l <= 5) { 
 
    $(this).addClass('p30'); } 
 
    // otherwise, apply a 50 percent class 
 
    else { 
 
    $(this).addClass('p50') 
 
    } 
 
});

p { 
 
    border: 1px dashed red; 
 
} 
 

 
span { 
 
    border: 1px solid #000; 
 
    padding: 5px; 
 
    display: inline-block; 
 
    box-sizing: border-box; 
 
} 
 

 
.p10 { 
 
    width: 10%; 
 
    background: lightblue; 
 
} 
 

 
.p30 { 
 
    width: 30%; 
 
    background: lightgreen; 
 
} 
 

 
.p50 { 
 
    width: 50%; 
 
    background: lightyellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<span class="p10">10 percent</span> 
 
<span class="p30">30 percent</span> 
 
<span class="p50">50 percent</span> 
 

 
<p> 
 
    <span>Here</span> 
 
    <span>is</span> 
 
    <span>an</span> 
 
    <span>amazing</span> 
 
    <span>sentence</span> 
 
    <span>well</span> 
 
    <span>composed</span> 
 
</p>