Make Div as wide as it needs to be

To explain my problem, I'm trying to make a div w开发者_StackOverflowide enough to accommodate a dynamically generated title without wrapping it, but the div also has other content, which I want to wrap.

In other words:

CSS:

.box {
    min-width:170px;
}

.box span.title {
    font-size:24px;
    white-space: nowrap;
}

.box span.text{
    font-size:10px;
    white-space: normal;
}

HTML:

<div class="box">
   <span class="title">Title on one line</span><br />
   <span class="text">This is the main body of text which I want to wrap as
           required and have no effect on the width of the div.</span>
</div>

However, this is causing the div to expand to be wide enough to contain the main body of text on one line, which I want to wrap. I've tried various arrangements for CSS and the putting them all inside container divs and the like but I can't seem to get the box to be exactly wide enough to contain only the title without wrapping (but not less than the min width)

Is there any way to do this just in CSS? Note I don't want to set a max width as this just causes it to become a static size again, as the main body of text is always going to be enough to hit the max width. I also can't line break the body manually as it's dynamically generated.

Is this (jsFiddle) what you're trying to accomplish?

I just added display: table; to .box's CSS. This expands the main div to the width of the title span but wraps the text span.

Note: You can also set a constant width to prevent the div from expanding to the width of the window. This way it will still expand to the width of the title if it is larger than your constant width, but will not grow if the user drags out the window. In my example I added width: 100px; to demonstrate.

A working jQuery example:

http://jsfiddle.net/8AFcv/

$(function() {
    $(".box").width($(".title").width());
})

For headlines you should use the <hN> tags (<h1>, <h2> etc).

For no text wrap:

white-space: nowrap;

On the element who's text you don't want to wrap.

Working Example on jsFiddle

If i understand your correctly you can easily set the same width for yours text as for yours title using JS or jQuery, for ex:

$('.text').width($('.title').width())

and run it at jQuery(document).ready or by event if you add it dynamically

Block elements such as divs extend as far as content pushes them, unless specified by explicit widths or heights.

A pure CSS solution for this is unlikely without setting a max-width on the div.

A pointer on CSS:

• Don't include the tags in your selectors (i.e. tag.class) as you are then forced to use that tag with that class. Simply using .class will make it easier to change your markup (should you need to) as well as make your class extend its use to more than a single tag.