我正在使用jQuery缩小a div的宽度，像这样：
$('div#foo').animate({width: 0},someSpeed);
虽然它正在缩小，但文字会回流以适应越来越薄的版本 div。我不希望这种情况发生 - 我希望文本保持不变，只是随着宽度减小而从视图中消失，就像你做的那样 $('div#foo').slideUp()。
是否有CSS技巧或其他方式使这项工作？
我正在使用jQuery缩小a div的宽度，像这样：
$('div#foo').animate({width: 0},someSpeed);
虽然它正在缩小，但文字会回流以适应越来越薄的版本 div。我不希望这种情况发生 - 我希望文本保持不变，只是随着宽度减小而从视图中消失，就像你做的那样 $('div#foo').slideUp()。
是否有CSS技巧或其他方式使这项工作？
现场演示： http://jsfiddle.net/AvYyT/1/
诀窍是使用内部容器并将其设置为外部容器的宽度。
您可以使用jQuery将内容的宽度设置为 div，添加 overflow:hidden 到了 div 然后才减小宽度。
像（未经测试，可能有错别字，但你明白了......）：
var el = $('div#foo');
el.children().each(function() {
$(this).width(el.width());
});
el.css('overflow', 'hidden').animate({width: 0}, someSpeed);
但这取决于内容 div如果里面有图像，这将无效。
一种选择是使用 white-space: nowrap; 在...上 div。唯一的问题是，如果您有一长串文本，则必须手动添加换行符。
在你的div CSS中，使用： overflow-x: hidden; overflow-y: hidden;
试着给它 vertical-align:top