[分享]css中如何实现文字自适应高度

在前端开发中，文字自适应高度是一个常见的需求。例如，在某些情况下，我们需要让一个文本框的高度随着输入内容的多少而动态调整。那么在CSS中如何实现文字自适应高度呢？.textarea { overflo...

在前端开发中，文字自适应高度是一个常见的需求。例如，在某些情况下，我们需要让一个文本框的高度随着输入内容的多少而动态调整。那么在CSS中如何实现文字自适应高度呢？

.textarea {
  overflow: auto;
  resize: none;
  height: auto;
} 

上述代码中，我们为文本框的容器元素设置了overflow属性为auto，这样就可以在文本框高度不够的情况下显示滚动条。同时，我们还将resize属性设置为none，这样就防止了用户手动调整文本框大小。最后，我们还将文本框的高度设置为auto，这样文本框就可以根据文本内容自动调整高度了。

除此之外，我们还可以使用CSS3的calc()函数结合min-height属性来实现文字自适应高度。代码如下：

.container {
  min-height: calc(100vh - 100px);
} 

在上述代码中，我们为容器元素设置了一个最小高度，这个高度是通过计算视口高度减去100px得到的。这样，当视口高度小于100px时，容器元素的高度将自动缩小以适应当前视口大小。