一、HTML换行标签
HTML提供了一个特殊的标签”br”用于换行。它不需要任何属性，直接将标签放入HTML代码中即可。
<input type="text" name="content"><br>
<input type="text" name="content"><br>
上述代码中，我们在两个input标签之间加入了一个br标签，将输入框分行显示。
二、CSS属性
除了使用HTML的br标签之外，我们还可以使用CSS中的”white-space”属性来实现换行。该属性可以控制如何处理HTML文本中的空白符。
其中，”white-space”属性的值有以下几种：
- normal：合并空白符，换行符被当作空格处理。
- nowrap：合并空白符，但不换行。
- pre：保留空白符，除了遇到”br”标签或换行符以外，都不会换行。
- pre-wrap：保留空白符，遇到”br”标签或换行符时换行。
- pre-line：合并空白符，遇到”br”标签或换行符时换行。
对于input标签，我们可以使用”white-space”属性的值为”pre-wrap”来实现换行。
input {
white-space: pre-wrap;
}
三、JavaScript实现
我们还可以使用JavaScript来实现input的换行显示。具体地，我们可以通过绑定input的oninput事件，以及使用innerHTML属性来实现输入内容时的实时换行显示。如下所示：
<input type="text" oninput="this.style.height=(this.scrollHeight+'px');">
上述代码中，我们为input标签绑定了oninput事件，当用户输入内容时，自动计算输入框的高度，并将其设置为当前输入框的高度，从而实现了实时换行显示。
四、总结
本文介绍了几种实现input换行显示的方法，包括使用HTML的br标签、CSS的white-space属性，以及JavaScript实现的方式。根据实际需求，我们可以选择适合自己的方法来实现input的换行显示。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/187780.html
微信扫一扫 
支付宝扫一扫 