Question

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

如果固定宽度块在左侧，则很容易

<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，{{1}}等许多变种，但是没有运气。我试过通过Stack搜索，但提供的解决方案似乎都不适合我的用例。我发现大多数解决方案都要求两个块都有固定的宽度，这不是我想要的。

非常感谢任何帮助。

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>

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

浮动右侧头部，固定宽度，没有包裹

2 个答案: