我不认为有一个css解决方案.
然而,这个JS有点像你想要的那样:
function updateTextarea() {
var textarea = document.getElementById("textarea");
// Get line height of the textarea
var lht = parseInt($('textarea').css('lineHeight'),10);
// Get lines
var scrlht = textarea.scrollHeight;
var lines = Math.floor(scrlht / lht);
if (lines < 4) {
textarea.style.height = '15px'
textarea.style.height = (lines * lht) + 'px'
}
}
textarea {
line-height: 15px;
height: 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<textarea id='textarea' oninput="updateTextarea()"></textarea>
</div>
在删除文本时,它不会使文本区变小.但当你打字时,它确实会变大.