如何创建像 Twitter 推文框这样的响应式文本区域

问题描述

我如何用 html/css/js 制作这样的盒子。

我希望它自动调整大小直到达到特定的行数，然后激活滚动

Twitter box

解决方法

看看 this 的例子，这就是你要找的

rank = 0

$('#contact-form').on( 'change keydown keyup paste cut','textarea',function () {  
  $(this).height(0).height(this.scrollHeight+2);
  if ($(this).height() >= 300) {
    $('textarea#message').css("overflow","auto");
  }
  else {
    $('textarea#message').css("overflow","hidden");
  }
}).find('textarea#message').change();

body{
  background:lightblue;
  display:flex;
  flex-flow:wrap column;
  justify-content:center;
  align-content:center;
  text-align:center;
  margin:10% auto;
  overflow:hidden;
  max-width:50%;
  max-height:50%;
}
textarea {
  border: 0 none;
  overflow: hidden; /*overflow is set to auto at max height using JS */
  background:lightcyan;
  font-family:sans-serif;
  outline: none;
  min-height:100px;
  max-height:314px;
  height: auto;
  resize: none;
  width:50%;
}
h1{
  font-family:sans-serif;
  font-size:150%;
  font-weight:600;
  clear:both;
}
h3{
  font-family:sans-serif;
  font-size:90%;
  font-weight:400;
  clear:both;
  text-align:left;
  margin: 10px auto;
}