2

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

我希望一个 div(.side)在 inline-block 内浮动(.wrap)，并且我希望另一个 div(.content)包含带有 text-overflow: 省略号的长非环绕字符串，以防溢出。也不.wrap应该比它的容器宽，所以它有 max-width: 100%。

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

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

您可以在此处看到此行为：http: //jsbin.com/evamik/1/，只需使浏览器窗口足够宽，您就会看到石灰色 div 中有文本溢出(.content)。如果您关闭 overflow:hidden ，.content您会看到， a 的.wrap宽度等于 a 的宽度.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/

4

1 回答 1

1

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

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

请注意，text-overflow:ellipsis;仅在使用white-space:no-wrap;and时才有效overflow:hidden;。这意味着您不能对多行文本使用省略号。请参阅MDN CSS 参考以了解 text-overflow。

如果您想确保文本换行而不是使用带有省略号的单行，您可以删除white-space:no-wrap;andoverflow:hidden;并添加 instead word-wrap:break-word;，这将打破长词以适应狭窄的空间。有关自动换行，请参阅MDN CSS 参考。

于 2013-04-30T07:02:44.570 回答