HTML / CSS Textarea高度自动吗？ 文字落后

Question

我的textarea处在某种情况下，我想使高度等于内容的高度。

 .form-style-4 { width: 550px; font-size: 16px; padding: 10px 10px 10px 10px; } .form-style-4 input[type=submit], .form-style-4 input[type=button], .form-style-4 input[type=text], .form-style-4 input[type=email], .form-style-4 textarea, .form-style-4 label { font-family: Georgia, "Times New Roman", Times, serif; font-size: 16px; } .form-style-4 textarea { font-style: italic; padding: 0px 0px 0px 0px; background: transparent; outline: none; border: none; border-bottom: 1px dashed #83A4C5; width: 275px; overflow: hidden; resize: none; height: 20px; } .form-style-4 textarea[name=jobdescription] { display: inline-block; min-height: 10px; } 

 <form class=form-style-4> <textarea name="jobdescription" id="jobdescription" readonly>Lorem ipsum, oh well nvm,Lorem ipsum, oh well nvm,Lorem ipsum, oh well nvm</textarea> </form> 

现在，我已经看到人们使用javascript函数（通过按下onkeyup进行调用）来执行此操作。 但这不是我真正想要的，我只希望textarea高度等于其内容。

在JavaScript中，它会像

function adjust_textarea(h) {
    h.style.height = "20px";
    h.style.height = (h.scrollHeight)+"px";
}

但是我想仅使用HTML / CSS就有可能吗？

编辑：此链接不重复。 我问是否有可能在html / css中执行此操作。 textarea的内容来自数据库，可以是1行，也可以是4行。 有没有什么像height：auto; 那可以解决这个问题？ 我不想为此使用Javascript，因为按键无关，因为这是一个只读的textarea

Answer 1

抱歉，但是普通CSS无法根据其内容更改文本区域的高度。 当添加多行时，您将不得不使用javascript或赋予其稳定的高度，并可能使用滚动条。

Answer 2

从我所能收集的资料来看，您正在尝试使其在textarea中显示其中的所有文本-如果是这样，为什么不直接在您的textarea标签中添加rows属性呢？ 您也不需要设置高度

<textarea rows="3"></textarea>

https://jsfiddle.net/5ouqe170/18/

Answer 3

这是使用<div>和contenteditable属性的另一种解决方案

 div{ width:98%; min-height:50px; border:1px dotted black; padding:5px; } 

 <div contentEditable="true">Type text here</div> 

Answer 4

这解决了我的问题：

function h(e) {
                $(e).css({ 'height': 'auto', 'overflow-y': 'hidden' }).height(e.scrollHeight -20);
                }
                $(".form-style-4 textarea[name='jobdescription']").each(function () {
                    h(this);
                }).on('input', function () {
                    h(this);
                });