CSS white-space within element having no set width

OnI ChaN

New Member
I have a span within another span where the child has no set width so the text is going onto a new line after just 1 or 2 words.Here's the code and a jsfiddle which will help to better see what I mean.\[code\]<span class="container">Lorem ipsum dolor <span class="child">Lorem ipsum dolor Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut risus enim, tincidunt ac tristique quis, vulputate sed nulla. Nam imperdiet imperdiet mollis. Vestibulum sed elit lorem, et luctus massa. Vivamus eleifend ante vel odio lacinia. </span></span>\[/code\]css:\[code\].container { width:auto; background-color:red; position:relative;}.child { position:absolute; top:35px; left:10px; max-width:500px; background-color:yellow; /*white-space:nowrap; This does not work because the text does not wrap after 500px */ }\[/code\]http://jsfiddle.net/RRx6r/What I ideally want to achieve is the child span expanding to a maximum of 500px depending on the quantity of text in it.white-space:nowrap does not work because the line never breaks.Any ideas?
 
Back
Top