javascript - HTML/CSS Textarea 高度自动？文字落后了

Question

我的文本区域有问题，我想让高度等于内容的高度。

.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 时调用。但这不是我真正想要的，我只想要文本区域的高度等于它的内容。

在 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，因为按键不相关，因为这是只读文本区域

Answer 1

抱歉，纯 css 无法根据内容更改文本区域的高度。当添加多行时，您将不得不使用 javascript 或给它一个固定的高度，也许还有一个滚动条.. :(