html - 固定宽度且无换行的 float 右标题

Question

假设我有两个 block ，一个固定宽度 block ，一个动态宽度 block 。我想将这两个 block 放在同一条线上，不换行。如果窗口缩小，动态宽度 block 将缩小(可能具有最小宽度)，然后在某个点之后它只会隐藏文本(溢出隐藏)。

如果固定宽度的 block 在左边，这很容易

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

但是如果我希望固定宽度的 block 位于右侧而不使用表格布局，我无法弄清楚如何实现这一点。

我已经尝试了 float: right 的许多变体，包括 overflow、white-space 等等，但没有成功。我尝试通过 Stack 进行搜索，但所提供的解决方案似乎都不适合我的用例。我发现的大多数解决方案都需要使两个 block 都具有固定宽度，这不是我想要的。

任何帮助将不胜感激。

Answer 1

使用这个 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>