如何让数字内容，占满一个定宽的盒子

问题遇到的现象和发生背景

场景是这样的：
一个固定宽度的盒子，里面要放一堆数字,数字有长有短，也就说不定长，
有什么办法让他任何时候，都均匀排布在盒子里面呢？

img

用代码块功能插入代码，请勿粘贴截图
有背景色区域的样式，是使用下面的代码得出的效果，并不是我期望的效果
.label {
  width: 60px;
  height: 31px;
  line-height: 31px;
  padding-right: 10px;
  text-align: justify;
}
 
.label::after {
  display: inline-block;
  width: 100%;
  content: "";
}


<html lang="en">
    <body>
        <div id="box">123456789123456789</div>
    </body>
    <style>
        #box {
            width: 600px;
            background-color: #DDDDDD;
            text-align-last: justify;
        }
    </style>
    <script>
        document.getElementById("box").innerHTML = document.getElementById("box").innerHTML.split("").join(" ");
    </script>
</html>

数字和英文默认无法拆分，所以需要用js来控制增加空格强制拆分

数字之间添加空格试试

我觉得没法或者很难实现。至少我没听过有什么样的CSS属性可以这样搞。你盒子里总不能一个数字再用一个标签吧，然后再结合js，然后用flex布局平均吧？

letter-spacing就可以实现
但是要具体灵活根据空间大小变化，建议通过js来改变这个属性的值
比如js先拿到这个div的宽度，平均给几个数字，数字本身的宽度

letterSpacing = （width(div) - width(数字) * n(数字个数)）/ n
document.getElementsByClassName('p')[0].style.letterSpacing = letterSpacing + 'px'