如何实现textarea自动扩展至最大高度并限制行数？

要实现输入时textarea和外层div自动增高，超过3行后停止扩展并显示滚动条，可以通过以下CSS和HTML实现：

完整代码 #

CSS #

.outerdiv {
  /* 外层容器自动适配内部textarea高度 */
  padding: 8px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
}

.outerdiv textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 1.5em;
  max-height: calc(1.5em * 3);
  line-height: 1.5;
  padding: 6px 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  resize: none;
  overflow-y: auto;
  font-size: 14px;
}

HTML #

<div class="outerdiv">
  <textarea rows="1" placeholder="请输入内容..."></textarea>
</div>

关键属性说明 #

• box-sizing: border-box：确保textarea的内边距和边框不会额外增加元素尺寸，避免超出容器
• min-height: 1.5em：设置textarea初始高度为1行（1.5em为行高，可根据字体大小调整）
• max-height: calc(1.5em * 3)：计算出3行内容的高度，超过后停止扩展
• line-height: 1.5：统一行高，保证最大高度刚好对应3行文本
• resize: none：禁止用户手动拖拽调整textarea大小，保持布局一致性
• overflow-y: auto：当内容超过最大高度时，自动显示垂直滚动条
• 外层div无需设置固定高度，默认块级元素会自动适配内部textarea的高度变化

内容的提问来源于stack exchange，提问作者Dolphin