javascript - 在 textarea 的输出 div 中保留换行符

Question

$("textarea").blur(function() {
  $("div").html($("textarea").val());
});

$("textarea").blur();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea style="height:50px;">
1. test
2. test
3. test
</textarea>

<div style="word-break: break-all;"></div>

我想让文本在 div 中的显示方式与它在 textarea 中的显示方式完全相同。

我试过用 word-break 等来对 div 进行 css，但都没有用。

注意:具体来说，我只想知道如何在一个 div 中完成它。

Answer 1

尝试将 white-space:pre; 或 white-space:pre-wrap; 设置为 div。

$("textarea").blur(function() {
  $("div").html($("textarea").val());
});

$("textarea").blur();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea style="height:50px;">
1. test
2. test
3. test
</textarea>

<div style="white-space:pre;"></div>