Html 浮动右侧收割台，宽度固定，无包裹

假设我有两个块，一个固定宽度块，一个动态宽度块。我想把这两块放在同一条线上，不用包装。如果窗口收缩，动态宽度块将收缩（可能具有最小宽度），然后在某个点之后，它将只隐藏文本（溢出隐藏）

如果固定宽度块位于左侧，这很容易

<div style="width: 800px; border: 1px solid black; white-space: nowrap; overflow: hidden;">
  <div style="display: inline-block; width: 150px;">Fixed width block</div>
  <div style="display: inline-block;">Loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong liiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiine</div>
</div>

定宽块
哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦

但是，如果我希望固定宽度的块位于右侧，而不使用表布局，我就不知道如何实现这一点

我尝试了许多不同的

浮点：右

和

溢出

，

空白

等等，但没有成功。我尝试过在堆栈中搜索，但所提供的解决方案似乎都不适合我的用例。我找到的大多数解决方案都要求两个块都有固定的宽度，这不是我想要的

任何帮助都将不胜感激。

请使用此CSS

<div style="width: 800px; border: 1px solid black; white-space: nowrap; overflow: hidden;">
    <div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis !important; display: inline-block; width: 150px;>Fixed width block</div>
    <div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis !important; display: inline-block;">Looooong liiiiiiine</div>
</div>

试试这个：

<div style="width: 800px; border:1px solid black;">
    <div style="width: 150px; float: right;">
        Fixed width block
    </div>
    <div style="width: auto; white-space: nowrap; overflow: hidden;">
        Loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong liiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiine
    </div>
</div>


定宽块
哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦
但这不是我要问的。我想要固定宽度的块在右手边。