Padding based on size of string?

Question

I'm trying to dynamically insert some list into an element called foos. I want to manually number this list (e.g. <span>${i + 1}. </span> for i in the list element number) but I want the distance between this number and the element to align nicely. By nicely I mean:

 8. foo
 9. foo
10. foo
11. foo

rather than what is displayed in the snippet, i.e.

8. foo
9. foo
10. foo
11. foo

Thanks for any help here!

let people = ['foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo'];
var htmlString = "";
for (var i = 0; i < people.length; i++) {
  var person = people[i];
  htmlString += `<span>${i + 1}. </span><span>${person}</span><br>`;
}
$('#foos').html(htmlString);

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" 
    type="text/javascript" charset="utf-8"></script>

<div id="foos"></div>

Answer 1

You can rely on some CSS and counter to easily achieve this:

let people = ['foo', 'a', 'foo', 'foo bar', 'foo', 'f', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo'];
var htmlString = "";
for (var i = 0; i < people.length; i++) {
  htmlString += `<span>${people[i]}</span>`;
}
$('#foos').html(htmlString);

#foos {
  counter-reset:num;
}
#foos span {
  display:block;
  margin-left:20px; /*adjust this*/
  position:relative;
}
#foos span:before {
  content:counter(num)'.';
  counter-increment:num;
  position:absolute;
  right:100%;
  margin-right:3px; /*adjust this*/
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" 
    type="text/javascript" charset="utf-8"></script>

<div id="foos"></div>

If the number can increase a lot you can try the following where the width of the number area will adjust based on the maximum number:

let people = ['foo', 'a', 'foo', 'foo bar', 'foo', 'f', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo','foo', 'a', 'foo', 'foo bar', 'foo', 'f', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo','foo', 'a', 'foo', 'foo bar', 'foo', 'f', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo','foo', 'a', 'foo', 'foo bar', 'foo', 'f', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo','foo', 'a', 'foo', 'foo bar', 'foo', 'f', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo','foo', 'a', 'foo', 'foo bar', 'foo', 'f', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo','foo', 'a', 'foo', 'foo bar', 'foo', 'f', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo','foo', 'a', 'foo', 'foo bar', 'foo', 'f', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo','foo', 'a', 'foo', 'foo bar', 'foo', 'f', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo'];
var htmlString = "";
for (var i = 0; i < people.length; i++) {
  htmlString += `<span>${people[i]}</span>`;
}
$('#foos').html(htmlString);

#foos {
  counter-reset:num;
}
#foos span {
  display:table-row;
}
#foos span:before {
  content:counter(num)'.';
  counter-increment:num;
  display:table-cell;
  text-align:right;
  padding-right:5px;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" 
    type="text/javascript" charset="utf-8"></script>

<div id="foos"></div>

Answer 2

I think use the following tag <pre></pre> would help. <pre> tag keeps white spaces.

And the use of a monospaced font ensures that white spaces are same width than other characters.

Hope it helps ;-)