以下代码导致#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
