Brainfart: How to make overflow content in a div

Question

I cant even come up with a proper subject for this one... Basically I have a box div, that when click expands to a rectangle and shows content in the new expanded area.

The problem I'm having is that when I animate out the div's width, the browser wants to render the content as the box is stretching, rather than just have it placed where I need it.

Initial State

 ____  
|    |  
|____|  

Clicked

 _________________  
|      Content    |  
|_________________|  

How it currently renders

 __________  
|      Con |  
|______tent|  

How I want it to render:

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

Someone help me out here... total brainfart.

Answer 1

Easy with jQuery

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

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

Answer 2

This is a CSS problem ..

if you want the text in the div to not wrap at the end you will need to use the CSS

white-space:nowrap;

(along with the overflow:hidden)

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