Html 同一行中的两个div，其中一个div中的文本将根据第二个div的宽度进行剪裁

我希望在一行中有两个div，左div的文本根据右div的宽度进行剪裁（div中的文本是动态生成的），因此我们无法固定这些div的宽度（右div中的文本必须完全可见，而左div中的文本可以剪裁）。此图显示了示例输出：

这是小提琴：

以下是代码的html部分：

<div class="parent">
    <div class="text">This text must be hidden if it is overflowing</div>
    <div class="number">88818888.333346</div>
</div>

如果此文本溢出，则必须将其隐藏
88818888.333346

有人能帮我一下吗。

这个看起来怎么样：

我给了父位置相对和数字div的白色背景色，所以它隐藏了下面的文本

.parent {
    width: 30%;
    position: relative;   
    overflow: hidden;
}

.number {
    display: inline-block;
    position: relative;
    background-color: white; 
    float:right;
}

.text {
    display: inline-block; 
    position: absolute;
    background-color: transparent;
    white-space:no-wrap;
    overflow:hidden;
    float:right;
}

---

这里有一种方法

您需要在文本周围添加一个内部包装元素，如下所示：

<div class="parent">
    <div class="text">
        <div class="inner">This text must be hidden if 
                           it is overflowing</div>
    </div>
    <div class="number">88818888.333346</div>
</div>

将

display:table

应用于

.parent

并指定字体大小和行高

将

显示：表格单元格

应用于

.number

和

.text

.inner

块将填充

.number

未占用的剩余宽度， 文本将换行成两行或多行。如果将高度指定为一行，则可以使用

overflow:hidden

隐藏额外的文本

使用

wordbreak:break all

可能是个好主意

---

请参见演示：

我不明白一些事情-如果右边的数字有一个固定的起点，为什么不能固定文本div的宽度？我希望背景颜色是透明的。有没有一种方法可以做到这一点而不必将其更改为白色，这并不容易。您可以将其嵌套在另一个div中，并将背景颜色设置为白色？您的CSS有许多多余的属性，这些属性不是您的解决方案所需要的，请参见@MarcAudet是否可以在不将数字背景颜色更改为白色的情况下隐藏数字下方的文本？@MarcAudet I只更改了提供解决方案绝对必要的CSS。我没有尝试重构。在不改变数字的背景色的情况下有可能吗？