css - 火狐+IE10。如何强制内联 block 尊重其内部 float 的全宽+溢出 :hidden divs?

Question

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

我想要一个 div (.side) 在内联 block (.wrap) 中 float ，我想要另一个 div (.content) 包含带有文本溢出的长非换行字符串:溢出时的省略号。此外，.wrap 不应比其容器宽，因此它具有 max-width: 100%。

当 .content 中的内容宽度与 .side 的宽度相结合，足以比 .wrap 的容器更宽时 - .content 中的内容应该溢出它。

并且当 .content 中的内容宽度与 .side 的宽度相结合小于 .wrap 的容器宽度时 - 然后.content 中不应该有溢出，.wrap 应该取 .content 和 .side 组合的宽度.似乎是这样，但在 Firefox 和 IE10 中不是。在这两个浏览器中，.wrap 的宽度与最宽的内部 div 一样宽。但我预计 .wrap 会尊重 .side 和 .content 的宽度。

您可以在此处看到此行为:http://jsbin.com/evamik/1/ ，只需将浏览器窗口设置得足够宽，您就会看到浅黄色的 div (.content) 中出现文本溢出。如果你关闭 overflow:hidden on .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>

CSS:

.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;
}

示例网址:http://jsbin.com/evamik/1/

Answer 1

我对这个问题有点困惑。 jsbin 示例似乎在 Windows 7 上的 IE10 中具有所需的行为。(即 .content div 在窗口太窄而无法显示完整行时使用省略号，而 .side 始终正确显示为向右浮动，如果窗口允许显示所有文本，则 .wrap 父 div 适合子 div，并且当窗口足够窄时具有 100% 的宽度导致文本溢出。)

关闭 .content div 上的 overflow:hidden; 会导致丑陋的行为，因为没有它，text-overflow:ellipsis; 没有效果，但 white-space:no-wrap; 强制文本保持在一个完整的行上。

请注意，text-overflow:ellipsis; 仅在同时使用 white-space:no-wrap; 和 overflow:hidden; 时有效.这意味着您不能对多行文本使用省略号。参见 MDN CSS reference for text-overflow .

如果你想确保文本换行而不是使用带有省略号的单行，你可以删除 white-space:no-wrap; 和 overflow:hidden; 和改为添加 word-wrap:break-word;，这将打破长单词以适应狭窄的空间。参见 MDN CSS reference for word-wrap .