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对其自身布局没有影响。元素的unused_ips = ['172.16.100.0/32', '172.16.100.1/32', '172.16.100.2/32', '172.16.100.3/32', '172.16.100.4/32', '172.16.100.5/32', '172.16.100.6/32', '172.16.100.7/32', '172.16.100.8/32', '172.16.100.9/32'...] used_ips = ['172.16.100.1/32','172.16.100.33/32']属性会影响其内容的布局，而不会影响其本身的布局，即使元素自己的框是内联级别的。

Answer 2

您需要在包装元素中使用“overflow：hidden”

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

}

我在jsfiddle http://jsfiddle.net/XjstZ/72/

中更新了您的示例

Answer 3

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

#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/

Answer 4

由于white-space: normal;。

，此内容换行

white-space CSS属性确定如何处理元素内的空白。要使单词在自身内部中断，请改用overflow-wrap，word-break或连字符。现在，如果你想用#wrapper来限制它，你可以限制div的溢出属性。如果你使用white-space: nowrap;作为div，那么清除溢出文本并在一行中显示div（ROW ）。

#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;


}

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

4 个答案: