如何用字符串填充剃须刀页面中的屏幕 width/height

Question

我正在寻找一种方法来在 razor 页面中使用动态字符串填充 div 或段落宽度。例如，假设我有一个句子“我非常喜欢饼干”，我有一个 div ，它有一个宽度和一个高度，我把“我喜欢饼干”放在开头，“很多”放在最后, 在中间我想用“非常”填充 div 而不换行或溢出。

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

期望的输出：

I love cookies very very very very very very very very much!

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

在 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();

如何用字符串填充剃须刀页面中的屏幕 width/height

how to fill a screen width/height in razor page with string

javascript

jquery

html

razor-pages