Equal spacing between characters in html-CodePudding

I am making a pagination system for my search page and currently have something that looks like this:

.pagination-wrapper{
  display: flex;
  justify-content: center;
  padding-top: 50px;
}
.number{
  border: thin solid rgb(80 80 80);
  padding: 0.2rem 0.3rem 0.2rem 0.3rem;
  text-align: center;
  margin: 0 0.2rem;

  min-width: 1rem;
}

<div >
    <span >1</span> 
    <span >56</span> 
  <span >111</span> 
  <span >888</span> 
</div>

I put min-width on the number elements to make the border have the same size for single and double digit numbers which works as expected.

Problem

When I have a "small" 3-digit number like 111 it takes up less space than a larger one like 888. The difference is subtle in the fiddle, it is much larger with my current font. Image for reference with my font:

What I want

I want the boxes of each 3 digit number to be the same size. Not the same size as the single and 2 digit ones, it can be larger. So the sizes for each 1 and 2 digit numbers are as the min width, say 16px. Then all 3 digit numbers should have the same width of the box, say 24px. And each 4 digit number should have 32px etc.

What I tried

I have tried to apply the attribute monospace to the font family with no help, I guess it is because my font is simply not monospaced. I solved it with Javascript by when I click on a page it will check the page numbers and apply a different min-width to each element depending on the size of the number. This feels a bit overkill though.

If it's of any help I use bootstrap 3 as framework, but the problem applies without it too.

Is there a way to solve this with HTML/CSS without JS or without changing to monospaced font?

CodePudding user response：

A solution proposed here is inserting each character into its own span of fixed width: How to imitate a monospace font with a variable-width font?

CodePudding user response：

In your class, you can try this property. As per your request, I'm sure it will work

.number { flex: 1 1 0%; }

CodePudding user response：

Try adding font-kerning: none; to the numbers class. Perhaps in combination with letter-spacing: 0.1rem;, which you can adjust using positive and negative values, if needed.