div中文字不换行(textarea中输入的文字，输出到div中文字不换自动换行的问题)

需求：在文本域中输入文字，回车开始输入下一行文字，点击按钮将信息输出到div中，并还是换行输出。
原因：浏览器会将文本里面的换行符（\n）和回车符（\r），替换成空格。

方案一： 使用js将字符串的换行符\r\n，转换成html中的换行

<textarea name="" id="content" cols="30" rows="10">textarea>
<div id="info">div>
<button id="btn">按钮button>
<script src="https://code.jquery.com/jquery-3.2.1.min.js">script>
<script>
    var btn = $("#btn");
    btn.on('click', function () {
        var val = $("#content").val();
        
        val = val.replace(/\r\n/g, '
'); //IE9、FF、chrome
        val = val.replace(/\n/g, '
'); //IE7-8
        $("#info").html(val);
        
		//上边的后三步与下边代码效果相同
		//$("#info")[0].innerText = val;
    })
script>

方案二：给展示信息的div添加css样式：white-space: pre;

• 缺点： 超出父元素的内容会隐藏

• white-space: pre; 保留换行符和(多余的)空格，在遇到换行符或者
  元素时才会换行。

• white-space: pre-wrap;保留换行符和(多余的)空格，文本除了遇到换行符或者
  元素外，也会在合适的位置自动换行。

• white-space: pre-line; 保留换行符，连续的空白符会被合并，文本除了遇到换行符或者
  元素外，也会在合适的位置自动换行。

  <textarea name="" id="content" cols="30" rows="10">textarea>
  <div id="info" style="white-space: pre;">div>
  <button id="btn">按钮button>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js">script>
  <script>
    var btn = $("#btn");
    btn.on('click', function () {
      var val = $("#content").val();
      $("#info").text(val);
    })
  script>

方案二：使用pre标签

• 注意：HTML 标签在

  里面还是起作用的。

 <textarea name="" id="content" cols="30" rows="10">textarea>
  <pre id="info">pre>
  <button id="btn">按钮button>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js">script>
  <script>
    var btn = $("#btn");
    btn.on('click', function () {
      var val = $("#content").val();
      $("#info").text(val);
    })
  script>