如何防止两个div换行并且没有水平滚动条

Question

我有一些div设置如下http://jsfiddle.net/hwffdodx/10/

<div>
<div style="display:inline"> [Button A] </div>
<div style="display:inline">Some looooooooooooooooooooooooong text hereeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</div>
</div>

基本上，我希望两个div在同一行上，第一个div我将用来显示一个图标，第二个div我希望它在调整窗口大小时包装在自己内部。

我试过使用"空白：nowrap"，但当窗口调整大小时，它会在底部显示滚动条，这不是我想要的。

我也尝试过为第二个div设置"宽度"，但我希望我能找到更好的解决方案，因为我的html中有很多这种风格的块，它们都有不同的父左填充，所以很难预设单个宽度。

现在，我使用"display:inline"使事物显示在同一行上。但现在缩进不再尊重包含按钮的第一个div。

有解决这个问题的想法吗？

谢谢！

更新：

我发现了一个解决方案（"溢出：隐藏"就像魔术一样…）：

<div style="display:inline-block">
    <div style="float:left"> [Button A] </div>
    <div style="overflow:hidden">Some looooooooooooooooooooooooong text eeeeeeereeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</div>
</div>

现在，两个div总是在同一行上，并且在调整大小时不会显示滚动条。而且，缩进效果很好（与只对所有div使用"inline"相比）

Answer 1

我不确定这是你想要实现的，但它可能会有所帮助：

.icon {
    display: inline;
    max-width: 20%;
}
.content {
    float: right;
    max-width: 80%;
}

<div>
    <div class="icon">[Button A]</div>
    <div class="content">Some looooooooooooooooooooooooong text hereeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</div>
</div>

Ps：在整页模式下运行代码片段，或参阅更新的Fiddle