如何用字符串填充剃刀页面中的屏幕宽度/高度

Question

我正在寻找一种在剃须刀页面内用动态字符串填充 div 或段落宽度的方法。例如，假设我有一个句子“我非常喜欢饼干”，我有一个 div，它有一个宽度和一个高度，我把“我喜欢饼干”放在开头，“much”放在最后，然后在中间我想用 "very"s 填充 div 而不换行或溢出。

<div class="col-md-6">
I love cookies 
<script>js_magic()</script>
much!
</div>

想要的输出：

我非常非常非常非常非常非常非常喜欢饼干！

好像“非常”这个词只要有足够的宽度就应该重复。

在 C# 中，我知道怎么做，我使用图形和字体、字符串长度等...但是 js 和 jQuery 对我来说总是一团糟。

Answer 1

在这种情况下，您需要通过添加至少一个然后测量它的宽度并计算可以插入多少来填充宽度来知道非常的绘图尺寸。 Working JSBin

还可以将此样式添加到您的容器 white-space: nowrap; 以防止不必要的包装

更新：添加评论

//this function takes 2 strings and inserts str2 into str at a specific position and returns the result
function insertString(str,ind,str2){
  return str.slice(0, ind) + str2 + str.slice(ind);
}

function fillInVery(){
  // capture the text content from HTML container
  var s = $("#container").text();
  // the text to be inserted multiple times (wrapped in order to be selected)
  var very = "<span class='very'>very </span>";

  console.log(s);
  // insert one VERY string to the text
  s = insertString(s,15,very);
  // replace the old string with the new one to be rendered
  $("#container").html(s);

  console.log(s);
  // get the width of the inserted and rendered VERY word
  var veryw = $('.very:first').width();
  var contw = $('#container').width();
  var contpw = $('#container').parent().width();
  // calculate the difference (space) between the container and its parent and divide it over the width of one VERY to get how many can fit in the remaining space
  var countInsert = Math.floor((contpw - contw)/veryw);

  // add VERY word to fill the space
  for(var i =0 ; i< countInsert; i++){
    s = insertString(s,15,very);
  }
  // replace the text and render it
  $("#container").html(s);
}

fillInVery();