Brainfart: как сделать содержимое переполнения в div

Question

Я даже не могу придумать подходящую тему для этого ... По сути, у меня есть блок div, который при щелчке расширяется до прямоугольника и отображает содержимое в новой расширенной области.

Проблема Iу меня есть то, что, когда я анимирую ширину div, браузер хочет визуализировать содержимое по мере растягивания окна, а не просто поместить его туда, где мне это нужно.

Начальное состояние

 ____  
|    |  
|____|  

Кликнул

 _________________  
|      Content    |  
|_________________|  

Как он рендерится в настоящее время

 __________  
|      Con |  
|______tent|  

Как я хочу, чтобы он рендерился:

 __________  
|      Cont|ent (overflow:hidden)  
|__________|  

Кто-нибудь, помогите мне здесь ..Всего мозга.

Answer 1

Это проблема CSS ..

если вы хотите, чтобы текст в div не переносился в конце, вам нужно использовать CSS

white-space:nowrap;

( вместе с overflow:hidden)

пример: http://www.jsfiddle.net/sy6vX/

Answer 2

Легко с jQuery

$(div).click( 
   function(){ 
       $(this).animate({clip: 'rect(50px, 50px, 50px, 50px)'}); 
   }, 

Пример: http://www.protofunc.com/scripts/jquery/clipFx/