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 として表示されます。つまり、他の数字より 2 桁短くなります。小数点の直後に 0 がある数値は、同じ有効桁数で表示されるため、他の数値よりも長くなります。

ほとんどのフォントでは、残りの文字は同じではありませんが、数字は同じ幅です。それらは、数字が列に表示されるときに数字が整列するように、すべての数字を個別に揃える必要なく、そのように作られています。

桁数を常に同じにすると、私のように残りのテキストが完全に静止していることがわかります: http://jsfiddle.net/Guffa/DKs49/8/

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

score 0 · Accepted Answer

W3仕様に従って：

「等幅」固定幅フォントは

3 に答える 3