Why do "inline-block" elements in a "nowrap" div overflow?
23,888
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.
Author by
Markus
Updated on January 09, 2020Comments
-
Markus over 4 years
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
-
yahermann about 9 yearsNot quite, as the content in <div id="headline"> gets truncated, per this fiddle forked from yours: jsfiddle.net/vkaggbx8
-
Markus over 6 yearsThis yields a different result. The headline is pushed below the image.
-
A.D. over 6 yearsBut you can check my fiddle which give me the prefect result.
-
JSG almost 4 yearsThis doesn't solve the issue when no-wrap is involved. Personally I want to use no-wrap without it breaking out.
-
JSG almost 4 yearsI however believe that in my case there is a format error. Too many closing div tags or not enough.