I'm attempting to create a max-width bounding box which will both wrap text (on spaces, no word-breaking allowed) and shrinkwrap to the width of the longest line of text. For a demo of the various shrinkwrap methods, see http://www.brunildo.org/test/IEMshrink-to-fit.html
I chose the "float" method, but in my testing, none of the methods accomplished my desired effect.
In the example code below (also available with live-preview at jsbin), I show what happens when you let the words wrap themselves, and what happens when you insert a <br /> line break tag. Using <br /> manually results in exactly the effect that I'm looking for, while omitting it wraps the text correctly, but forces the white box to take the entire max-width as its width, which I'd like to avoid.
<style>
div#wrapper { background: #ddd; padding: 10px; }
header { display: block; float: left; max-width: 320px; background: #fff; margin-bottom: 20px; clear: both; }
#wrapper:after { content: " "; clear: both; display: table; }
</style>
<div id="wrapper">
<header>
<h1>Diane Von Furstenberg</h1>
</header>
<header>
<h1>Diane Von<br />Furstenberg</h1>
</header>
</div>
Here's a screenshot of the problem with some elaboration:
I've created a JS method to manually insert the <br /> tag as a stopgap measure, but I imagine there must be some way to do this properly using only CSS/HTML. Thanks for the help!
