15

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

4

4 回答 4

9

顾名思义，内联块参与内联布局，这意味着它们的行为就像内联元素和文本一样。white-space: nowrap通过阻止元素换行导致文本在元素中溢出；内联块也会发生同样的事情。就是这么简单。

事实上，#headline它对white-space: normal自己的布局没有影响。一个元素的white-space属性会影响其内容的布局，而不是它本身，即使元素自己的盒子是内联级别的。

于 2018-01-08T18:36:00.250 回答
0

您需要在包装元素中使用“溢出：隐藏”

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

}

我在 jsfiddle http://jsfiddle.net/XjstZ/72/中更新了您的示例

于 2015-01-09T14:34:48.347 回答
0

将宽度设置为标题元素可以解决此问题。

#headline {
   display: inline-block;
   vertical-align: middle;
   width: 60%;
}

如果图像包装器和图像都定义了它们的最大宽度，则它是响应式的。

#logo {
   display: inline-block;
   vertical-align: middle;
   max-width: 35%;
}

#logo img {
   width: 6em;
   max-width: 100%;
}

http://jsfiddle.net/tt1k2xmL/

于 2017-12-27T13:22:16.173 回答
-1

此内容因white-space: normal;.

white-space CSS 属性确定如何处理元素内的空白。要使单词在自身内部中断，请改用overflow-wrap,word-break或连字符。现在，如果您想限制它，#wrapper则可以限制 div 的溢出属性。如果您使用white-space: nowrap;for div 这将清除溢出文本并在单行 (ROW) 中显示 div。

#wrapper {
    background: #fea;
    width: 50%;
    overflow: hidden;
}

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

#logo img {
       width: 6em; 
}

#headline {
     display: inline-block;
     vertical-align: middle;


}
于 2017-12-07T03:32:40.477 回答