Why do “inline-block” elements in a “nowrap” div overflow?
Question
The following code causes #headline to overflow #wrapper and I do not understand why this is happening.
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;
}
Example code: http://jsfiddle.net/XjstZ/21/ or http://tinkerbin.com/XvSAEfrK
La solution
As the name suggests, inline-blocks participate in inline layout, which means they act just like inline elements, and text. white-space: nowrap
causes text to overflow in an element by preventing it from wrapping; the same thing happens with inline-blocks. It's that simple.
The fact that #headline
has white-space: normal
has no impact on its own layout. An element's white-space
property affects the layout of its contents, not itself, even if the element's own box is inline-level.
Autres conseils
You need to use "overflow:hidden" in your wrapper element
#wrapper {
background: #fea;
white-space: nowrap;
width: 50%;
overflow: hidden;
}
I updated your sample in jsfiddle http://jsfiddle.net/XjstZ/72/
Setting width to headline element fixes the issue.
#headline {
display: inline-block;
vertical-align: middle;
width: 60%;
}
It's responsive if both image wrapper and image have their max-width defined.
#logo {
display: inline-block;
vertical-align: middle;
max-width: 35%;
}
#logo img {
width: 6em;
max-width: 100%;
}
This content wrap because of white-space: normal;
.
The white-space CSS property determines how whitespace inside an element is handled. To make words break within themselves, use overflow-wrap
, word-break
, or hyphens instead.
Now there if you want to limit this with #wrapper
than you can limit the overflow property for the div.If you using white-space: nowrap;
for div this clear the overflow text and show the div in a single line (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;
}