Javascript（或CSS？）：不断改变周围文本的数字

Question

Answer 1

如果您同意固定宽度

<span>

：

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

Answer 2

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

例如，如果您获得像 0.7362924825642400 这样的随机数，它将显示为 0.73629248256424，即比其他数字短两位。小数点分隔符后带有零的数字将使用相同数量的有效位数显示，因此它会比其他数字更长。

在大多数字体中，数字仍然具有相同的宽度，尽管其余字符并非如此。它们是这样制作的，以便当数字显示在列中时，数字会对齐，而不必单独对齐每个数字。

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

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

Answer 3

根据W3规范：

‘等宽’固定宽度字体是

Answer 4

现在您可以使用

font-variant-numeric: tabular-nums

来保持数字宽度更加一致并避免“摆动”。