如何使用纯CSS实现textarea自动调整大小？

嘿，我来给你分享几个仅用纯CSS实现textarea自动适配内容高度的方法，完全不用JavaScript就能搞定！

方法一：精准匹配内容高度（推荐） #

这个方法的核心思路是用一个隐藏的“克隆”元素模拟textarea的内容高度，让textarea跟着这个克隆元素自动调整高度，效果非常精准。

首先，把你的textarea放在一个容器里，利用Angular的绑定把当前文本内容同步到容器的自定义属性上：

<div class="textarea-container" [attr.data-replicated-value]="FormDataJSON.Remarks">
  <textarea appAutosize class="form-control new-form-control" [(ngModel)]="FormDataJSON.Remarks" 
            id="Remarks" name="Remarks" 
            [attr.disabled]="FormDataJSON.FormOptions.Remarks.disabled ? '' : null" 
            [attr.readonly]="FormDataJSON.FormOptions.Remarks.readonly ? '' : null" 
            [required]="FormDataJSON.FormOptions.Remarks.required" #Remarks="ngModel"
            onfocus="this.placeholder = 'Enter remarks here'" onblur="this.placeholder = ''">
    {{FormDataJSON.Remarks}}
  </textarea>
  <label class="control-label new-control-label" for="Remarks">Remarks</label>
</div>

然后添加对应的CSS样式：

.textarea-container {
  display: grid;
  /* 继承textarea的基础样式，确保克隆元素和原textarea视觉一致 */
  font: inherit;
  padding: 0.5rem;
}

.textarea-container textarea {
  resize: none; /* 可选，禁止用户手动调整大小 */
  overflow-y: hidden; /* 隐藏默认滚动条 */
  min-height: 4em; /* 设置最小高度，避免初始状态过矮 */
  max-height: 20em; /* 设置最大高度，内容过多时自动出现滚动条 */
  grid-row: 1;
  grid-column: 1;
  border: 1px solid #ced4da; /* 可根据你的表单样式调整 */
  padding: inherit;
  font: inherit;
}

/* 隐藏的克隆元素，用来模拟内容高度 */
.textarea-container::after {
  content: attr(data-replicated-value) "\A"; /* "\A"处理换行符 */
  white-space: pre-wrap; /* 保留文本的换行和空格 */
  visibility: hidden; /* 隐藏元素但保留高度 */
  grid-row: 1;
  grid-column: 1;
  border: inherit;
  padding: inherit;
  font: inherit;
  word-wrap: break-word;
}

方法二：简单原生适配（快速实现） #

如果不需要特别精准的自动调整，只是想让textarea能随着内容增加自然扩展，这个简单方法也能满足需求：

.form-control.new-form-control {
  min-height: 4em;
  max-height: 20em;
  resize: vertical; /* 允许用户手动调整垂直高度，可选 */
  overflow-y: auto;
}

这个方法利用浏览器原生特性，内容超过高度时自动显示滚动条，同时保留手动调整高度的选项（如果保留resize: vertical）。

注意事项 #

• 方法一中，一定要确保textarea和伪元素的字体、内边距、边框等样式完全一致，否则高度会出现偏差
• 设置max-height很关键，避免内容过多时把页面撑得过长
• 动态内容场景下（比如Angular双向绑定），方法一需要同步内容到容器的data-replicated-value属性，才能实时更新高度

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