<div>和<textarea>是HTML中常用的標簽，用于創建網頁中的文本輸入框。在默認情況下，用戶在<textarea>中輸入的內容會顯示為一個長長的單行文本，如果用戶輸入的內容超過了輸入框的寬度，文本會自動換行。然而，如果我們想要控制<textarea>中的文本換行，使其顯示為一行一行的格式，就需要使用一些CSS和JavaScript技巧來實現。
下面將通過幾個代碼案例來詳細解釋如何實現<div>和<textarea>的換行效果。
案例一：使用CSS的white-space屬性

<style>
.textbox {
white-space: pre-wrap;
word-wrap: break-word;
}
</style>
<div class="textbox">
<textarea rows="4" cols="50">
這是一段
需要換行的
文本內容
</textarea>
</div>

針對上述代碼，CSS的white-space屬性被設置為pre-wrap，它的作用是保留文本中的空白字符和換行符，并且按照CSS的規則進行換行。這樣一來，<textarea>中的文本就會按照預期的格式進行換行。
案例二：使用JavaScript的split和join方法

<script>
function formatText() {
var textarea = document.getElementById("myTextarea");
var text = textarea.value;
var formattedText = text.split("\n").join("<br>");
textarea.innerHTML = formattedText;
}
</script>
<textarea id="myTextarea" rows="4" cols="50">
這是一段
需要換行的
文本內容
</textarea>
<button onclick="formatText()">格式化</button>

JavaScript代碼中的formatText函數通過split方法將文本按照換行符\n分割成一個數組，然后使用join方法將數組中的元素用HTML的換行標簽
連接起來，最后將格式化后的文本設置回<textarea>中，從而實現了換行的效果。
以上是兩個簡單的代碼案例來演示如何實現<div>和<textarea>的換行效果。根據具體的需求，我們可以選擇合適的方法來實現我們想要的換行效果，無論是使用CSS的屬性還是通過JavaScript的方法都可以輕松實現文本的換行顯示。