Я использую jQuery для сжатия ширины div, например:
$('div#foo').animate({width: 0},someSpeed);
Пока он сокращается, текст переполняется, чтобы соответствовать все более-менее div. Я не хочу, чтобы это произошло - я хочу, чтобы текст оставался таким, какой он есть, просто исчезает из-за уменьшения ширины, как это происходит, если вы делаете $('div#foo').slideUp().
Есть ли трюк CSS или какой-либо другой способ сделать это?
Live demo: 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