Html 如何使用CSS自动显示文本区域？

如果一个文本区域以一个小框、单行开始，当用户键入多行直到设置限制（300px）时，滚动条将显示溢出自动和所有输入一起出现时，是否可以使用CSS自动增长为多行？

2020更新-使用

contenteditable

因为这个答案仍然不时帮助一些人，我想用克里斯·科耶的最新发现更新我的答案

请注意，它仍然不是CSS3解决方案。但它内置在浏览器中，并重新创建OP的行为

在

上使用

contenteditable

HTML属性将允许用户编辑

div

的文本内容，并在用户断线时展开。然后，只需将您的

div

解压缩为

您的默认值

。可扩展文本区域{
边框：1px实心#ccc；
字体家族：继承；
字体大小：继承；
填充：1px6px；
显示：块；
宽度：100%；
溢出：隐藏；
调整大小：两者；
最小高度：40px；
线高：20px；
}

这个解决方案的一个警告是，我们没有使用textareas。请记住，一些功能（如占位符）需要一些创造性才能使用

来源：伟大的克里斯·科耶

---

原始答案：使用轻量级JS库的变通方法

不幸的是，似乎只有CSS3无法做到这一点

但是，有一个3.2k的小型JS替代方案

下面是演示和用法

您可以通过执行

npm install autosize

并使用这种方式安装它

autosize(document.querySelector('.yourTextAreaClass'));

或者jQuery风格

autosize($('.yourTextAreaClass'));

---

它就像一个符咒。它重量轻，有一种自然的感觉，不像许多自动缩放那样做无用的动画。

据我所知，仅使用CSS是不可能的，但这里有一个超小的角度指令，只需检查新行即可。您可以轻松地调整它，使其具有最大行数等

angular.module('Shared.AutoGrow.Directive', [])
.directive('autoGrow', function() {
  return {
    restrict: 'A',
    link(scope, element) {
      element.on('input change', () => {
        const text = element[0].value;
        const lines = 1 + (text.match(/\n/g) || []).length;
        element[0].rows = lines;
      });
    },
  };
});

简单的JS解决方案应该很容易推断，只需要在输入/更改元素上应用一个事件侦听器就可以了。

Chris Coyier（著名的CodePen）刚刚发布了一个基于网格的CSS实现。自2020年10月30日起

.grow wrap{
/*简单的方法是将这些元素相互叠加，并根据最高元素的高度调整大小*/
显示：网格；
}
.grow wrap:：之后{
/*注意奇怪的空间！需要防止神经质行为*/
内容：attr（数据复制值）“；
/*这就是textarea文本的行为方式*/
空白：预包装；
/*隐藏在视图、单击和屏幕阅读器之外*/
可见性：隐藏；
}
.grow wrap>textarea{
/*您可以保留此选项，但在用户调整大小后，它会破坏自动调整大小*/
调整大小：无；
/*Firefox在增长时显示滚动条，你可以这样隐藏*/
溢出：隐藏；
}
.grow wrap>textarea，
.grow wrap:：之后{
/*需要相同的样式*/
边框：1px纯黑；
填充：0.5雷姆；
字体：继承；
/*放在彼此的上面*/
网格面积：1/1/2/2；
}
身体{
保证金：2rem；
字体：1rem/1.4系统界面，无衬线；
}
标签{
显示：块；
}

正文：

只需确保textarea具有

高度：auto

这仅在有显式换行时有效，而在文本隐式换行时无效。我不确定为什么要进行向下投票，我在解决方案的描述中提到了这一限制。