jQuery: Is there a way to animate a div's width without any text movement?

Question

I'm using jQuery to shrink a div's width, like this:

$('div#foo').animate({width: 0},someSpeed);

While it's shrinking, the text reflows to fit the ever-thinner div. I don't want this to happen - I want the text to stay as it is, just disappearing from view as the width decreases, as happens if you do $('div#foo').slideUp().

Is there a CSS trick or some other way to make this work?

Answer 1

Live demo: http://jsfiddle.net/AvYyT/1/

The trick is to use an inner container and set its with to the width of the outer container.

Answer 2

One option is to use white-space: nowrap; on the div. The only problem there is that you will have to manually add line breaks if you have a long body of text.