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

Question

我在数据库中存储内容，例如：

Hello
This
is 
Text

当我将它传递给文本区域时，它会保留新的换行符。但是，如果我将该文本传递给内容可编辑的 div，它将保持如下状态：

Hello This is Text

我该如何解决这个问题？

Answer 1

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

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

Answer 2

您可以使用<br /> 搜索和替换换行符。 http://jsfiddle.net/fPv6S/1/

Answer 3

试试这个......

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 4

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

CSS white-space 属性可以提供帮助：

前：

white-space: pre

保留空白序列。线只在 源和<br> 元素中的换行符。

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

预包装：

white-space: pre-wrap

保留空白序列。换行符换行 字符，<br>，并根据需要填充行框。

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

预行：

white-space: pre-line

空白序列被折叠。换行符换行 字符，<br>，并根据需要填充行框。

div{
  border: 1px solid #000;
    width:200px;
}
.pre {
    white-space: pre;
}
.pre-wrap{
   white-space: pre-wrap;
}
.pre-line{
   white-space: pre-line;
}

.inline-block{
    display:inline-block
}

<h2>
pre
</h2>
<div class="pre" contenteditable=true>Lorem ipsum dolor sit amet doesn't have a meaning but here comes 10 white spaces:____          ____</div>

<h2>
pre-wrap
</h2>
<div class="pre-wrap" contenteditable=true>Lorem ipsum dolor sit amet doesn't have a meaning but here comes 10 white spaces:____          ____</div>

<h2>
pre-line
</h2>
<div class="pre-line"  contenteditable=true>Lorem ipsum dolor sit amet doesn't have a meaning but here comes 10 white spaces:____          ____</div>

<h2>
Chrome FIX
</h2>
<div class="pre-line inline-block"  contenteditable=true>Lorem ipsum dolor sit amet doesn't have a meaning but here comes 10 white spaces:____          ____</div>

编辑 2018 年 8 月 14 日：

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