TextArea文本域输入内容原格式在页面展示

解决方法：使用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=" 450px;height: 230px; margin-top: 30px;"></textarea>
        <!-- 文本内容展示 -->
        <pre>
            <div style=" 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;*/
}

添加样式后的效果：