一、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/zh-tw/n/187780.html
微信掃一掃 
支付寶掃一掃 