Brainfart: Comment faire du contenu de débordement dans un div

Question

Je ne peux même pas trouver un sujet approprié pour celui-ci ... Fondamentalement, j'ai un div boîte, que lorsque le clic se développe en un rectangle et montre le contenu dans la nouvelle zone élargie . Le problème que j'ai est que quand j'anime la largeur de la div, le navigateur veut rendre le contenu pendant que la boîte étire, plutôt que de le placer juste là où j'en ai besoin.

Etat initial

____ 
| | 
|____| 

cliquée

_________________ 
|  Content | 
|_________________| 

Comment ça rend actuellement

__________ 
|  Con | 
|______tent| 

Comment je veux qu'il rendre:

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

Quelqu'un m'aider ici ... total brainfart.

Answer 1

facile avec jQuery

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

Exemple: http://www.protofunc.com/scripts/jquery/clipFx/

Answer 2

Ceci est un problème CSS ..

si vous voulez que le texte dans la div à ne pas envelopper à la fin vous devez utiliser le CSS

white-space:nowrap; 

(ainsi que le overflow:hidden)

exemple: http://www.jsfiddle.net/sy6vX/