我的文本区域有问题,我想让高度等于内容的高度。
.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,因为按键不相关,因为这是只读文本区域
最佳答案
抱歉,纯 css 无法根据内容更改文本区域的高度。当添加多行时,您将不得不使用 javascript 或给它一个固定的高度,也许还有一个滚动条.. :(
关于javascript - HTML/CSS Textarea 高度自动?文字落后了,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43737158/