为每个单词定义宽度并自动组成标题

Question

我正在寻找一种自动方式 用javascript撰写句子。

这是一个使用这句话的例子：
«这是一个很棒的句子组成» 然后我想要块大小改变dependind 在字宽上 最后，它看起来像这样： 到目前为止，我只找到了如何用文字剪切句子 如何为每个«单词/文本块»定义宽度？ 取决于他们的宽度？

 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>

def my_assert(condition, fail_str, suc_str):
    assert condition, fail_str
    print suc_str   

Answer 1

在将您的文字放回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 2

这是一个实现，用于查找要应用的相关网格大小。 （并在调整浏览器大小时重新运行拟合代码，以便它能够响应地工作）

＆＃13;

＆＃13;

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

＆＃13;

#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%}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>