为什么在“nowrap”div中的“inline-block”元素溢出？

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

解决方法

因为你告诉它：

#wrapper {
    white-space: Nowrap;
}

意味着内联子元素不会包装(在您的情况下,标题div,但是标题,文本等)如果它们溢出.基本上,显示：inline-block;使元素被视为一个单词.

改为空白：正常;如果没有足够的空间,标题将打破下一行.

原文地址：https://www.jb51.cc/css/214263.html