Question

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.

<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>

css:

.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 */ 
}

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?

Answer 1

add

display:block;

to either the .container, or to both the .container and the .child (depending on issues with your other css rules). Note that you need to set a max-width on the container as well, else it will grow to whatever space is available.

See this Fiddle