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 回答