textarea 内容文字换行文字高度变小

如果您想要在 `<textarea>` 元素中实现自动换行，并且使文本框的高度根据内容自适应，可以使用一些 JavaScript 来实现。

首先，您可以使用 CSS 的 `white-space` 属性来控制文本在达到一定宽度后自动换行。例如：

textarea {
  white-space: pre-wrap; /* 或者使用 pre-line */
}

然后，您可以通过 JavaScript 来动态调整 `<textarea>` 元素的高度以适应其内容。以下是一个示例的 JavaScript 代码：

function adjustTextareaHeight(textarea) {
  textarea.style.height = "auto";
  textarea.style.height = textarea.scrollHeight + "px";
}

// 获取所有的 <textarea> 元素
const textareas = document.querySelectorAll("textarea");

// 遍历每个 <textarea> 元素，并为其绑定 input 事件
textareas.forEach((textarea) => {
  textarea.addEventListener("input", () => {
    adjustTextareaHeight(textarea);
  });
});

在上述代码中，我们定义了一个 `adjustTextareaHeight` 函数，用于根据内容调整 `<textarea>` 元素的高度。然后，我们获取页面中所有的 `<textarea>` 元素，并为它们绑定了 input 事件，当输入内容发生变化时，会自动调用 `adjustTextareaHeight` 函数来调整高度。

这样，当您在 `<textarea>` 中输入文字时，文本框的高度将根据内容自适应。