在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 (/ /.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输入框中实现自动换行的几种方法，具体选择哪种方法，要根据实际情况选择。