HTML - DIV内容中的换行符可编辑吗？

Question

我在数据库中存储内容,例如:

Hello
This
is 
Text

当我将它传递给textarea时,它会保留新的换行符.但是,如果我将该文本传递给内容可编辑的div,它将保持如下:

Hello This is Text

我该如何解决这个问题？

Answer 1

在div上设置样式:white-space: pre或white-space: pre-wrap

示例:http://jsfiddle.net/fPv6S/

Answer 2

尝试这个......

var patt2 = new RegExp("<div>","g");
var patt3= new RegExp("</div>","g");
var patt4= new RegExp("<br>","g");
var z=x.replace(patt2,"\n").replace(patt3,"").replace(patt4,"");

这样就可以了...

Answer 3

要在@Explosion Pills上添加一些正确答案的信息，并从MDN中提取一些信息：

CSS white-space属性可以帮助您：

上一个：

white-space: pre

保留空白序列。行仅在源和<br>元素中的换行符处断开。

如示例所示，这可能会导致不必要的水平滚动条！

预包装：

white-space: pre-wrap

保留空白序列。在换行符处的行被断开<br>，并在必要时填充行框。

正如@ceremcem指出的那样，当复制粘贴文本时，框末尾的换行符不会被传输，这是有道理的，因为这些换行符不是文本格式的一部分，而是视觉外观的一部分。

前行：

white-space: pre-line

空白序列被折叠了。在换行符处的行被断开<br>，并在必要时填充行框。

white-space: pre

white-space: pre-wrap

编辑08/14/2018：

在Chrome中，您可能会遇到麻烦：按下Enter将<div>在您的内容可编辑内容中生成一个新内容。为防止这种情况，您可以按Shift+ Enter或将其设置display: inline为可编辑的内容，<div>如小提琴中所示。