Auto widht and height in textarea

Question

Я пробовал по нескольким вопросам, но не нашел ответа.

Как получить текстовое поле в соответствии с размером шаблона «texdtart»?

#entry{float:center;clear:both;margin-top:40px;margin-bottom:25px;margin-left:auto;margin-right:auto;} 
 
#entry textarea{margin-left:auto;margin-right:auto;line-height:100%;text-align:left;margin-top:0px;display:block;

<div id="entry"><form><textarea class="textarea3" onclick="this.focus();this.select()" readonly="readonly" style=" width:"";height""> 
 
_________________§§§§§§§§__________§§_____§§ 
 
_______________§§________§§_______§§§§___§§§§ 
 
_____________§§__§§§§§§§§__§§______§§_____§§ 
 
____________§§__§§______§§__§§______§§___§§ 
 
___________§§__§§___§§§__§§__§§_____§§§§§ 
 
___________§§__§§__§__§__§§__§§_____ §§§§§ 
 
___________§§__§§__§§___§§§__§§_____§§§§§ 
 
___________§§__§§___§§§§§§__§§_____§§§§§§ 
 
____________§§__§§_________§§_____§§§§§§ 
 
_______§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§ 
 
___§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§ 
 
___§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§ 
 

 
</textarea></form></div>

Answer 1

Я не думаю, что это возможно непосредственно через CSS. Вы можете достичь этого, используя javascript или jquery. Попробуйте это:

$(document).ready(function(){ 
    $(".textarea3").css("width", $(".textarea3:first").get(0).scrollWidth); 
    $(".textarea3").css("height", $(".textarea3:first").get(0).scrollHeight+10); 
}); 

Answer 2

Пожалуйста, проверьте скрипку https://jsfiddle.net/afelixj/4remtc67/

Один шаг до сих пор в ожидании, чтобы вычислить ширину символа, чтобы применить правильную width. теперь он жёстко до 8. но он все еще работает

var ta = $("#entry textarea"), 
    text = ta.val(); 

var lines = text.split("\n"); 

var count = lines.length; 

var ll = 0; 

for (var i=0;i<count;i++){ 
    if(lines[i].length > ll){ 
     ll = lines[i].length; 
    } 
} 

var lh = parseInt(ta.css('line-height')), 
    fs = parseInt(ta.css('font-size')); 

ta.css({ 
    'height': count*lh, 
    'width': ll*8 + 'px' 
});