I am trying to create a max-width bounding box that will both wrap the text (by spaces or word resolution) and reduce the width of the longest line of text. For a demonstration of various shrink methods, see http://www.brunildo.org/test/IEMshrink-to-fit.html
I chose the "float" method, but in my testing none of the methods achieved the desired effect.
In the code example below (also available with live-preview in jsbin ), I show what happens when you release the words to wrap yourself and what happens when you insert a line break tag <br /> . Using <br /> manually leads to the exact result that I am looking for, while omitting it, it wraps the text correctly, but forces the white box to use the entire maximum width as its width, which I would 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 is a screenshot of the problem with some detail:
I created a JS method for manually inserting a <br /> tag as a stop measure, but I suppose there should be some way to do it right using only CSS / HTML. Thanks for the help!
source share