如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度

让我来详细讲解一下如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度的攻略。

问题描述

在HTML中，pre元素和textarea元素都是常用于显示文本的元素。但是，它们在默认情况下都会出现滚动条，如果文本内容过长会导致页面布局不够美观。所以，我们需要去掉它们的滚动条，并让它们自动换行、自适应文本内容高度。

解决方法

去掉滚动条

我们可以使用CSS样式来去掉pre和textarea元素的滚动条，代码如下：

pre,
textarea {
  overflow: hidden; /*隐藏滚动条*/
  resize: none; /*禁止元素大小调整*/
}

自动换行

自动换行可以使用CSS的white-space属性来实现，设置该属性为pre-wrap即可自动换行，代码如下：

pre {
  white-space: pre-wrap;
  word-wrap: break-word; /*避免单词太长折行*/
}

对于textarea元素，自动换行也可以通过设置CSS的overflow-wrap属性来实现，代码如下：

textarea {
  white-space: pre-wrap;
  overflow-wrap: break-word; /*避免单词太长折行*/
}

自适应文本内容高度

首先，我们需要使用JavaScript来获取pre和textarea元素的高度。代码如下：

function autoHeight(element) {
  element.style.height = "auto";
  element.style.height = element.scrollHeight + "px";
}

使用上述代码可以实现当输入文本内容后，pre或textarea元素的高度会自适应文本内容的高度。

如果使用jQuery，可以通过以下代码实现：

$("pre, textarea").on("input", function () {
  this.style.height = "auto";
  this.style.height = this.scrollHeight + "px";
});

这样就可以实现预览无滚动条，自动换行和自适应文本内容高度。

示例

下面，我将为您提供两个示例代码，以便更好地理解如何实现pre和textarea元素无滚动条，自动换行和自适应文本内容高度。

示例一：无滚动条，自动换行，自适应文本内容高度的pre元素

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>示例一：pre元素自适应文本内容高度</title>
    <style>
      pre {
        width: 400px;
        padding: 10px;
        border: 1px solid #ccc;
        overflow: hidden;
        resize: none;
        white-space: pre-wrap;
        word-wrap: break-word;
      }
    </style>
  </head>
  <body>
    <pre oninput="autoHeight(this)">这是一段很长的文本内容，因为比较长，所以需要换行来显示</pre>
    <script>
      function autoHeight(element) {
        element.style.height = "auto";
        element.style.height = element.scrollHeight + "px";
      }
    </script>
  </body>
</html>

示例二：无滚动条，自动换行，自适应文本内容高度的textarea元素

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>示例二：textarea元素自适应文本内容高度</title>
    <style>
      textarea {
        width: 400px;
        height: 100px;
        padding: 10px;
        border: 1px solid #ccc;
        overflow: hidden;
        resize: none;
        white-space: pre-wrap;
        word-wrap: break-word;
        overflow-wrap: break-word;
      }
    </style>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
      $(function () {
        $("textarea").on("input", function () {
          this.style.height = "auto";
          this.style.height = this.scrollHeight + "px";
        });
      });
    </script>
  </head>
  <body>
    <textarea>这是一段很长的文本内容，因为比较长，所以需要换行来显示</textarea>
  </body>
</html>

这两个示例演示了如何让pre和textarea元素去掉滚动条自动换行自适应文本内容高度。希望能对您有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度 - Python技术站