编辑于 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/