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

要在@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>

编辑08/14/2018：

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

Answer 3

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

HTML - DIV中的新行字符是否满足？

3 个答案:

前提：

预包装：

前行：

编辑08/14/2018：