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

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

我正在创建一个带有金钱显示的游戏界面。所以假设玩家口袋里有 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;
}

解决方法

#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,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