游戏HUD金额数字位数增加时如何让文本向右扩展而非向左偏移

问题根因 #

你当前给金额文本#text4设置了right: 12.00vw的绝对定位规则，相当于把文本的右边缘固定在距离视口右边缘12vw的位置。当文本长度随金额位数增加时，只能向左侧延伸，自然就会出现向左偏移的问题。

解决方法 #

这里提供两种可行方案，按需选择即可： #

方案1：直接修改文本定位规则（改动最小）

将#text4的定位基准从右边缘改为左边缘，固定文本左边界的位置，长度增加时就会自动向右扩展：

#text4 {
    font-size: 1.5vw;
    color: rgb(53, 143, 73);
    position: absolute;
    /* 把原来的right:12vw替换成下面这行 */
    left: calc(100vw - 12vw);
    top: 1.7vw;
    text-shadow: 4px 4px 10px #313131;
}

方案2：关联文本和背景容器（更稳定，推荐）

把金额文本放到背景容器moneyhud内部，相对容器定位，彻底避免文本和背景错位的问题：

1. 调整HTML结构：

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

2. 调整CSS规则：

#text4 {
    font-size: 1.5vw;
    color: rgb(53, 143, 73);
    position: absolute;
    /* 调整left值适配你需要的文本起始位置 */
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    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;
    /* 新增相对定位，让内部文本基于该容器定位 */
    position: relative;
}

内容的提问来源于stack exchange，提问作者MasterClooney