Padding based on size of string?

问题

I'm trying to dynamically insert some list into an element called foos. I want to manually number this list (e.g. ${i + 1}.  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>

回答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>

回答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 ;-)

回答3:

Something like this would be possible using CSS:

let people = ['foosa', 'foo', 'foofsafa', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foofsafasf', 'foo'];
var htmlString = "";
for (var i = 0; i < people.length; i++) {
  var person = people[i];
  htmlString += `
      <div class="item-wrapper">
 	  <span>${i + 1}. </span>
          <span>${person}</span>
      </div>`;
}
$('#foos').html(htmlString);

.item-wrapper {
  display: table-row;
}

.item-wrapper span {
  display: table-cell;
}

.item-wrapper span:first-child {
  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>

Edit inspired by the @Temani Afif's solution.

回答4:

Why not just add a style to: htmlString += ${i + 1}. ${person} ;

htmlString += ${i + 1}. ${person} ;

回答5:

Maybe something like this.

let people = ['foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo', 'foo'];
let max_string_size = (people.length + "").length;  
let htmlString = people.map((person, idx) => {
  let idx_str = (idx + 1 + "").padStart(max_string_size).replace(/\s/g, '&nbsp;&nbsp;');
  return `<span>${idx_str}. </span><span>${person}</span><br>`;
}).join("")
$('#foos').html(htmlString);

回答6:

Find out how much you need to pad by finding out the length of your array, then the length of the length of your array... then use the padding function.

var blah = ["foo","foo","foo","foo","foo","foo","foo","foo","foo","foo","foo","foo","foo","foo","foo","foo","foo"];
var textToAppend = ". ";
var padTo = (blah.length + textToAppend).length;
for(var i = 0; i<blah.length;i++)
  {
    padded = ((i+1) + textToAppend).padStart(padTo);
    console.log(padded + blah[i]);
  }

and get this out

 1. foo
 2. foo
 3. foo
 4. foo
 5. foo
 6. foo
 7. foo
 8. foo
 9. foo
10. foo
11. foo
12. foo
13. foo
14. foo
15. foo
16. foo
17. foo

来源：https://stackoverflow.com/questions/58864693/padding-based-on-size-of-string

标签

javascript

html

css

string

padding