在web开发中，我们经常需要使用textarea输入框来输入长文本信息，如评论、联系方式、文章等等。但是，当输入内容过多，textarea默认是不会自动换行的，这就会导致输入内容超出输入框的范围，影响用户体验。那么，如何在textarea输入框中实现自动换行呢？

一、使用CSS中的white-space属性

CSS中的white-space属性用于规定如何处理HTML文本中的空格、换行符和制表符等字符，其中包括“normal”、“nowrap”、“pre”、“pre-wrap”和“pre-line”这几种取值。而我们需要使用的是“pre-wrap”值。

textarea{

    white-space: pre-wrap;

    overflow:auto;

}

以上代码意思是将textarea的white-space属性设置为“pre-wrap”，表示保留文本中的空格和换行符，并自动换行。同时，将overflow属性设置为“auto”，表示在内容溢出时，自动添加滚动条。

二、使用JS监听输入事件

我们还可以使用JS监听输入事件，当输入框中输入的内容包含了回车、换行符和空格等控制字符时，通过JS动态添加支持自动换行的样式。

// 获取textarea中的内容

let inputBox = document.querySelector("textarea");

// 定义支持自动换行的样式

let style = document.createElement("style");

style.type = "text/css";

style.appendChild(document.createTextNode(".inputBox{ white-space:pre-wrap; word-wrap:break-word;}"));

// 监听输入事件

inputBox.addEventListener("input", function() {

    this.className = "inputBox";

    // 将样式添加到页面元素中

    document.head.appendChild(style);

    // 判断textarea中是否有空格回车等转义字符

    if (/\n/.test(this.value)) {

        this.classList.add("inputBox");

    }

});

以上代码意思是当我们输入内容时，自动监听输入事件，包括按键输入、粘贴输入等，然后通过正则表达式匹配输入内容中是否包含了回车、换行符和空格等控制字符，如果包含，则动态添加样式并支持自动换行。

三、利用CSS省略号

当输入内容过长时，我们可以利用CSS中的省略号，来省略过长的文字部分，以节约页面空间。具体实现方法如下：

textarea{

    width:400px;

    height:200px;

    overflow:hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

}

以上代码意思是将textarea的width设置为400px，height设置为200px。同时，将overflow属性设置为“hidden”，表示隐藏超出部分；将white-space属性设置为“nowrap”，表示不换行；将text-overflow属性设置为“ellipsis”，表示使用省略号替代超出部分。

以上就是在textarea输入框中实现自动换行的几种方法，具体选择哪种方法，要根据实际情况选择。