具有固定宽度且不换行的浮动右标题答案

【问题标题】：Float right header with fixed width and no wrap具有固定宽度且不换行的浮动右标题
【发布时间】：2014-10-09 00:08:33
【问题描述】：

假设我有两个块，一个固定宽度块，一个动态宽度块。我想把这两个块放在同一行而不换行。如果窗口缩小，动态宽度块会缩小（可能是最小宽度），然后在某个点之后它会隐藏文本（溢出隐藏）。

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

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

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

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

任何帮助将不胜感激。

【问题讨论】：

标签： html css css-float overflow

【解决方案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>

【讨论】：

这不是我要问的。我想把固定宽度的块放在右边。

【解决方案2】：

试试这个：

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

【讨论】：