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

Question

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

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

Исходное состояние

____ 
| | 
|____| 

Нажал

_________________ 
|  Content | 
|_________________| 

Как он в настоящее время оказывает

__________ 
|  Con | 
|______tent| 

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

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

Кто-то поможет мне здесь ... полный мозг.

Answer 1

Easy с JQuery

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

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

Answer 2

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

, если вы хотите, чтобы текст в DIV не обернуть в конце концов вы должны используйте CSS

white-space:nowrap; 

() наряду с overflow:hidden)

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