$('textarea.paginate').live('keydown', function(event) { // scrollbars apreared if (this.clientHeight < this.scrollHeight) { var words = $(this).val().split(' '); var last_word = words.pop(); var reduced = words.join(' '); $(this).val(reduced); $(this).css('height', '65px'); $(this).after('<textarea class="paginate"></textarea>'); $(this).next().focus().val(last_word); } });
.paginate { height: 60px; width: 200px; display: block;}
<textarea class="paginate"></textarea> <!-- this is for info only --> <div style="position: absolute; top: 25px; right: 5px; width: 140px;">A solution for<br><a href="http://stackoverflow.com/questions/6042115/">this question</a>.</div>