如何使每个字符的宽度相同？

Question

我正在使用自定义字体。该设计不允许我更改字体。

数字更改时，由于数字的宽度不同，它被推送后的内容。

有没有办法使所有数字都具有相同的宽度？我不想分配span组件的宽度，因为我需要将其内联，并且宽度应该由其具有的位数确定。

const numberDom = document.querySelector('.number');
let number = 0;

function tick() {
  number += 1;
  numberDom.innerText = number;
}

setInterval(tick, 50);

p {
  font-size: 1rem;
}

.number {
  font-family: 'Carter One', cursive;
  font-size: 1.5rem;
  color: #365;
}

.number::after {
  content: 'pt';
  font-size: 0.75em;
  margin-left: 0.1em;
  color: #587;
}

<link href="https://fonts.googleapis.com/css?family=Carter+One&display=swap" rel="stylesheet">

<p>You got <span class="number"></span>, good job!</p>

Answer 1

好的，所以我首先创建了一个函数，该函数可以更改您的<p>的外观。在那之后，我能找到的唯一解决办法就是将数字放在inline-block中。

这是我的fiddle

修改

我制作了一个脚本，用于更改width中的inline-block。这是一条if语句，如果您的电话号码是1000或更高，则width将会更改。

Fiddle

您总是可以制作出else if，且超过10000个。

Answer 2

将您的电话号码类别更改为：

 QueryResponse queryResponse = new QueryResponse(client.doGet(request.toUrl()));