为什么"nowrap"div中的"inline-block"元素溢出？

Question

以下代码导致#headline溢出#wrapper,我不明白为什么会发生这种情况.

HTML:

<div id="wrapper">
    <div id="logo">
        <img src="/test.png">
    </div>
    <div id="headline">
        <h1>This headline overflows its wrapping div. # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #</h1>
    </div>
</div>

CSS:

#wrapper {
    background: #fea;
    white-space: nowrap;
    width: 50%;
}

#logo {
    display: inline-block;
    vertical-align: middle;
}

#logo img {
       width: 6em; 
}

#headline {
     display: inline-block;
     vertical-align: middle;
     white-space: normal;
}

示例代码:http://jsfiddle.net/XjstZ/21/或http://tinkerbin.com/XvSAEfrK

Answer 1

顾名思义,内联块参与内联布局,这意味着它们就像内联元素和文本一样.white-space: nowrap通过防止文本包装,导致文本在元素中溢出; 内联块也会发生同样的事情.就这么简单.

这一事实#headline已经white-space: normal有自己的布局没有影响.元素的white-space属性会影响其内容的布局,而不会影响其本身,即使元素自己的框是内联级别的.