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

I'm looking for a way to fill up a div or a paragraph width, inside a razor page, with a dynamic string. for example, let's say I have the sentence "I love cookies very much" and I have a a div which have a width and a height, I put "I love cookies" at the beginning and "much" at the end, And in the middle I want to fill the div with "very"s without wrapping or overflow.

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

desired output:

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

as if, the word "very" should repeat for as long as it have enough width.

In C# i, sort of, know how to do it, I use graphics and font, stringlength etc... but js and jQuery always look like a big mess to me.

Solution

in this case you need to know the drawing size of very by adding at least one and then measuring it's width and calculate how many you can insert to fill the width. Working JSBin

also add this style to your container white-space: nowrap; to prevent unneeded wrapping

UPDATE: Comments added

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