CSS 显示所有文本区行而不滚动

在本文中，我们将介绍如何使用CSS来显示文本区域的所有行而不让其滚动。

文本区域通常用于接受用户输入的大段文字，如评论框或简介框。然而，默认情况下，当输入的文本超出文本区域的可见行数时，文本区域会自动出现滚动条。有时，我们希望能够将文本区域的所有行都展示出来，而不需要滚动。

阅读更多：CSS 教程

使用CSS的max-height属性

要实现这个效果，我们可以使用CSS的max-height属性。max-height属性定义了元素的最大高度，超过该高度的内容将会被隐藏。

首先，我们需要给文本区域添加一个固定的高度，并将overflow属性设置为auto，以便在内容超出高度时自动出现滚动条。接下来，我们使用max-height属性来定义文本区域的最大高度，将其值设置为无限大，即max-height: none。这样，文本区域将会显示所有的行，而不会出现滚动条。

以下是一个示例代码：

textarea {
  height: 300px;
  overflow: auto;
  max-height: none;
}

在这个示例中，我们将文本区域的高度设置为300像素，并将overflow属性设置为auto。然后，通过将max-height属性设置为none，实现了文本区域显示所有行的效果。

使用JavaScript动态计算高度

除了使用CSS的max-height属性，我们还可以使用JavaScript动态计算文本区域的高度，以确保能够显示所有的行。

首先，我们需要给文本区域添加一个固定的高度，并设置overflow属性为hidden，以隐藏超出高度的内容。然后，我们使用JavaScript来计算文本区域的实际高度，并将其应用到文本区域的样式中。

以下是一个示例代码：

<textarea id="myTextarea" rows="4"></textarea>

<script>
function adjustTextareaHeight() {
  var textarea = document.getElementById("myTextarea");
  textarea.style.height = "auto";
  textarea.style.height = (textarea.scrollHeight) + "px";
}

window.onload = function() {
  adjustTextareaHeight();
}

</script>

在这个示例中，我们使用JavaScript的scrollHeight属性来获取文本区域的实际高度，并将其应用到文本区域的样式中，从而实现显示所有行的效果。