当字母或数字的数量增加时，如何将文本向右移动

Question

我正在创建一个带有金钱显示的游戏 HUD。所以假设玩家口袋里有 0 美元，它应该是这样的：

注意：在右上角

文本的位置：

right: 12.00vw;
top: 1.7vw;

现在让我们不切实际，假设玩家口袋里有 50.000.000 美元，我看起来像这样：

但它应该是这样的：

那么当口袋里的钱增加时，如何让文字向右移动而不是向左移动？

代码：

<div class="moneyhud"></div>
    <div ID="hud">
        <div id="top">
        <span id="text4">50000000 $</span>  <!-- Money -->      
    </div>
 </div>

#text4 {
    font-size: 1.5vw;
    color: rgb(53, 143, 73);
    position: absolute;
    right: 12.00vw;
    top: 1.7vw;
    text-shadow: 4px 4px 10px #313131;
}

.moneyhud {
    position: absolute;
    background-image: 
    url("https://img.rehmann.online/a/fastlife/gruengeld.png");
    background-repeat: no-repeat;
    right: 1.00vw;
    top: 2vw;
    z-index: -1;
    height: 30px;
    width: 288px;
    color: #fff;
}

Answer 1

#text4 {
    font-size: 1.5vw;
    color: rgb(53, 143, 73);
    position: absolute;
    right: 12.00vw;
    top: 1.7vw;
    text-shadow: 4px 4px 10px #313131;
}

.moneyhud {
    position: absolute;
    background-image: 
    url("https://img.rehmann.online/a/fastlife/gruengeld.png");
    background-repeat: no-repeat;
    right: 1.00vw;
    top: 2vw;
    z-index: -1;
    height: 30px;
    width: 288px;
    color: #fff;
}

<div class="moneyhud">
    <div id="hud">
        <div id="top">
          <span id="text4">50000000 $</span>  <!-- Money -->  
        </div>
    </div>
 </div>

这是您当前拥有的代码。请注意您是如何依赖硬编码值来显示动态内容的。尝试这样的事情：

#text4 {
    font-size: 16px;
    color: rgb(53, 143, 73);
    text-shadow: 4px 4px 10px #313131;
}


.moneyhud {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 20px;
    right: 10px;
    height: 30px;
    width: 288px;
    background-image: 
    url("https://img.rehmann.online/a/fastlife/gruengeld.png");
    background-repeat: no-repeat;
    color: #fff;
}

<div class="moneyhud">
    <span id="text4">50000000 $</span> 
 </div>

这应该可以让您大致了解如何对其进行 flex-box

当字母或数字的数量增加时，如何将文本向右移动

How to move the text to the right when the amount of letters or numbers increase

html

css

text

move