解決方法：使用pre標簽包括要展示文本內容的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>測試文本域原樣輸出</title>
</head>
<body>
<div>
<h2>測試文本域原樣輸出</h2>
<hr>
<!-- 文本域輸入框 -->
<textarea id="txt1" style="width: 450px;height: 230px; margin-top: 30px;"></textarea>
<!-- 文本內容展示 -->
<pre>
<div style="width: 450px; height: 230px; border: 1px solid red;" id='txt2'></div>
</pre>
<br>
<input type="button" id="btn" value="獲取內容" onclick="getContent()">
</div>
<script>
// 獲取輸入的文本域文本，並在其他元素中展示
function getContent() {
var ele = document.getElementById('txt1');
document.getElementById('txt2').innerText = ele.value;
}
</script>
</body>
</html>
效果：
存在問題：如果展示框的寬度小於輸入框的寬度時，文字會默認不換行，導致溢出
解決辦法：設置pre標簽樣式
pre {
white-space: pre-wrap;
/*word-wrap: break-word;*/
}
樣式屬性說明：
| 值 | 描述 |
|---|---|
| normal 默認 | 空白會被瀏覽器忽略 |
| pre | 空白會被瀏覽器保留。其行為方式類似 HTML 中的標簽 |
| nowrap | 文本不會換行，文本會在在同一行上繼續，直到遇到標簽為止 |
| pre-wrap | 保留空白符序列，但是正常地進行換行 |
| pre-line | 合並空白符序列，但是保留換行符 |
| inherit | 規定應該從父元素繼承 white-space 屬性的值 |
添加樣式后的效果：
