纯CSS实现Textarea根据初始内容自动适配高度

嘿，当然可以！完全不需要JavaScript，纯CSS就能让你的textarea完美适配已有内容的高度，刚好符合你「只匹配现有文本、不需要动态调整」的需求。

核心实现代码 #

直接给你最简洁的解决方案，把这段CSS加到你的样式里就行：

textarea {
  /* 禁用默认的拖拽调整大小（可选，根据你的交互需求决定） */
  resize: none;
  /* 让高度自动跟随内容计算 */
  height: auto;
  /* 隐藏多余的滚动条，避免内容刚好匹配时出现滚动条 */
  overflow: hidden;
  /* 可选：让内边距/边框不影响高度计算，避免偏差 */
  box-sizing: border-box;
  /* 可选：让textarea宽度铺满父容器 */
  width: 100%;
}

关键细节解释 #

• height: auto 是核心：textarea默认会根据rows属性设置固定高度，加上这个属性后，它会自动根据内部已有文本的高度来计算自身高度。
• overflow: hidden：防止内容高度刚好匹配时，浏览器还是显示一条多余的滚动条（有些浏览器会有这个小细节问题）。
• box-sizing: border-box：如果你的textarea有内边距或者边框，这个属性能让这些样式被包含在元素的总高度里，避免高度计算出现偏差。

额外提示 #

• 如果你不需要禁用用户调整textarea大小，可以去掉resize: none这一行。
• 这个方案只在页面加载时生效，不会随着用户输入动态改变高度——正好完全符合你的需求！
• 兼容性拉满，所有现代浏览器（Chrome、Firefox、Safari、Edge）都支持这些属性，不用担心兼容问题。

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