How can I force a container to always wrap to two lines?

I have a demo here that shows what I'm aiming for. I want to wrap a line of text so that two lines of it fit in with the rest of the body text.

The catch is, my开发者_Python百科 example has a br tag. The text that I want to wrap does not contain a br tag.

The box should expand or contract horizontally as required to make the text wrap to two lines.

Is there a way to achieve this with just CSS? If not, how can I do it with javascript?

UPDATE:

I can get reasonably close with this. The text is wrapped, but the parent container won't shrink.

Here's a javascript hack that works. It reads the width of the div once it has loaded, and then sets the width to be half of that.

If you want the width to be dynamic (ie, change on browser resize etc) you would need to incorporate the hack into the resize event handler.

http://jsfiddle.net/hzqAB/7/