56

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

Hello
This
is 
Text

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

Hello This is Text

我该如何解决这个问题？

4

4 回答 4

139

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

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

于 2013-09-26T20:29:57.243 回答
13

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

CSSwhite-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 中你可能会遇到麻烦：按下会在你的 contenteditable 中Enter生成一个新的。<div>为防止这种情况发生，您可以按Shift+Enter或设置为小提琴中所见display: inline的 contenteditable 。<div>

于 2018-08-06T07:34:29.857 回答
4

尝试这个......

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,"");

这样就可以了...

于 2018-02-24T06:34:24.807 回答
1

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

于 2013-09-26T20:32:48.573 回答