Динамическое изменение размеров textarea под содержимое

Всем примет! У меня есть textarea. Как мне сделать, что бы него ширина и высота изменялись под размер содержимого текста?
Я попробовал сделать в ширину, но вышло что-то не то. У всех знаков разная ширина и ширина, то была слишком маленькая, то большая.
var $textarea = $('#t_a'); $textarea.on('input', function() { var val_length = $(this).val().length; $(this).css({width: val_length * 10}); }); #t_a { width: 20px; height: 20px; min-width: 20px; max-height: 20px; }

Ответ

Возможно что-то упустил, но как-то так:
var maxWidth = 200; var maxHeight = 100; $('.demo').on('input', function(e){ // Если появляется скролл и его ширина больше клиентской → увеличиваем ширину клиента if (this.scrollWidth > this.clientWidth) this.style.width = this.scrollWidth + 'px'; // Если ширина больше максимально допустимой → даем словам "ломаться" и фиксируем ширину if (this.clientWidth >= maxWidth) { this.style.width = maxWidth; this.style.whiteSpace = 'pre-wrap'; } // Если высота больше максимальной → нафиг ничЁ не надо if (this.clientHeight > maxHeight) return; // Если появляется скролл и его высота клиентской → увеличиваем высоту клиента if (this.scrollHeight > this.clientHeight) this.style.height = this.scrollHeight + 'px'; }) .demo { white-space: nowrap; overflow: hidden; }