How do I style numbers?

Question

I am trying to change the styling of numbers.

• I want to add some space between every 3 digits.
• I will know exactly where the numbers will be located in t

Answer 1

I suggest to use display:flex so that the "sep" character is in auto-determined font-size.

The idea is that turn <p>1000</p> into <p><span>1</span><span>0</span><span>0</span><span>0</span></p> by js.

Then, add "sep" character visually by css generated content. span:nth-last-of-type(3n) { content:<sep>; ..}. This way, the <sep>(can be any character actually) will have same font-size as number text.

demo

Answer 2

Try something like this.

const numberWithSep = (x) => {
  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, "<div class='sep'></div>");
}

var num = numberWithSep('12345678');


document.getElementById("number").innerHTML = num;

//retrive like this
console.log(document.getElementById("number").innerText);

.sep {
  display: inline-block;
  padding: 10px;
}

<p id="number"><p>

If you want the separator as comma (,) just change the div to ,