javascript - Javascript（或css？）：不断改变数字，避免摆动周围的文本

Question

我已经实现了这样的东西：

Here are some numbers: 123234. Cool huh?

然后动态更改数字：

setInterval(function () {document.getElementById('1').innerHTML = Math.random();},100);

但是，我没有使用固定宽度的字体（就像 jsfiddle 那样）

添加数字时，我需要移动周围的文本（就像它正在做的那样......）但是，在我的网站上，当数字的数量相同时，周围的文本仍然会根据数字宽度摆动（因为不使用固定宽度字体，1 比 2 窄）。

有人知道如何解决这个问题吗？（或者可以推荐一款看起来不像打字机的跨平台定宽字体……）

编辑：根据@guffa 的评论，许多字体都有固定宽度的数字。最简单的路线=选择更好的字体，而不是为此烦恼。

score 2 · Accepted Answer

如果您对固定宽度没问题：

p span {
    display: inline-block;
    width: 150px;
    text-align: right;
}

score 1 · Accepted Answer

文本不会因为数字的宽度不同而跳动，而是因为数字的数量不同而跳动。

例如，如果你得到一个像 0.7362924825642400 这样的随机数，它将改为显示为 0.73629248256424，即比其他数字短两位。小数分隔符后紧跟零的数字将使用相同数量的有效数字显示，因此它会比其他数字长。

在大多数字体中，数字仍然是相同的宽度，尽管其余的字符不是。它们是这样制作的，因此当数字按列显示时，数字将对齐，而不必分别对齐每个数字。

如果您始终使数字位数相同，您很可能会像我一样看到其余文本完全静止：http: //jsfiddle.net/Guffa/DKs49/8/

document.getElementById('1').innerHTML = String(Math.random()).substr(0,15);

score 0 · Accepted Answer

“等宽”固定宽度字体是

3 回答 3