Css Firefox+；IE10。如何强制内联块遵守其内部浮动的全宽+；溢出：隐藏div？

于2013年4月30日编辑：IE10似乎摆脱了所描述的行为，我们现在唯一可以看到这种行为的浏览器是Firefox

我希望一个div

（.side）

在内联块

（.wrap）

内浮动，我希望另一个div

（.content）

包含带有文本溢出的长非包装字符串：溢出时省略。另外，

.wrap

不应比其容器宽，因此其最大宽度为：100%

当

.content

中的内容宽度加上

.side

的宽度足以比

.wrap

的容器宽时，

中的内容应溢出

当
.content
中的内容宽度与
.side
的宽度之和小于
.wrap
的容器宽度时，
.content
中应该没有溢出，
.wrap
只应取
.content
和
side
的宽度之和。看起来是这样，但在Firefox和IE10中不是这样。在这两种浏览器中，
.wrap
的宽度与最宽的内部div一样宽。但我希望
.wrap
将同时考虑
.side
和
content
的宽度

您可以在这里看到这样的行为：，只要将浏览器窗口设置得足够宽，您就会看到石灰色div
（.content）
中存在文本溢出。如果关闭溢出：隐藏在
.content
上，您将看到
.wrap
的宽度等于
.content
的宽度，而
.side
的宽度被忽略

那么，如何强制
.wrap
同时考虑
.side
和
.content
的宽度呢

HTML:

  <div class="wrap">
    <div class="side">
       side
    </div>
    <div class="content">
       nonwrappnonwrappingnonwrappingnonwrappingnonwrapping
    </div>
    <div class="clear"></div>
  </div>

示例url:
这个问题让我有点困惑。jsbin示例似乎在Windows7上的IE10中具有所需的行为。（也就是说，
.content
div在窗口太窄而无法显示整行时使用省略号，
.side
始终正确显示为右浮动，如果窗口允许显示所有文本，则父div的
.wrap
将适合子div，如果窗口太窄而导致文本丢失，则父div的宽度为100%。）（水流）

关闭
溢出：隐藏.content
div上的code>会导致丑陋的行为，因为没有它，
文本溢出：省略号无效，但
空白：无换行强制文本保持在一个完整的行上

注意
文本溢出：省略号仅在同时使用
空白时有效：无换行和
溢出：隐藏。这意味着您不能对多行文本使用省略号。看

如果要确保文本换行而不是使用带省略号的单行，可以删除
空白：无换行和
溢出：隐藏并改为添加
换行：断开单词，它将打断长单词以适应狭窄的空格。请参阅。
在IE10（Win 8）中-是的，这个bug已经消失了。但它仍然存在于最新的Firefox（20.0.1-Win7，20.0-Mac）中。在你检查了jsbin的例子之后，我想我的问题应该变得清晰了。
.wrap {
  background: lime;
  display: inline-block;
  max-width: 100%;
}
.side {
  float: right;
  background: orange;
}
.content {
  overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}  
.clear {
  clear: both;
}