HTML - DIV 内容中的换行符是否可编辑？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19038070/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML - Newline char in DIV content editable?
提问by Afonso Luis
I am storing content in the database, for example:
我将内容存储在数据库中，例如：
Hello
This
is
Text
and when I pass that to a textarea, it stays with the new line breaks. But if I pass that text to a div with content editable, it would stay like this:
当我将它传递给 textarea 时，它会保留新的换行符。但是，如果我将该文本传递给内容可编辑的 div，它将保持如下所示：
Hello This is Text
How can I fix this problem?
我该如何解决这个问题？
回答by Explosion Pills
Set a style on the div: white-space: preor white-space: pre-wrap
在 div 上设置样式：white-space: pre或white-space: pre-wrap
Example: http://jsfiddle.net/fPv6S/
回答by Sebbas
To add some info on @Explosion Pillscorrect answer and extract some info from MDN:
添加一些关于@Explosion Pills正确答案的信息并从MDN 中提取一些信息：
The CSS white-spaceattribute is there to help:
CSSwhite-space属性可以提供帮助：
pre:
前：
white-space: pre
Sequences of white space are preserved. Lines are only broken at newline characters in the source and at
<br>elements.
保留空白序列。仅在源和
<br>元素中的换行符处换行。
This might result in unwanted horizontal scrollbars as shown in the example!
这可能会导致不需要的水平滚动条，如示例所示！
pre-wrap:
预包装：
white-space: pre-wrap
Sequences of white space are preserved. Lines are broken at newline characters, at
<br>, and as necessary to fill line boxes.
保留空白序列。换行符、 at
<br>和必要时换行以填充行框。
As @ceremcempointed out the line breaks at the end of the box will not be transferred when the text is copy-pasted, which makes sense since these line breaks are not part of the text formatting but rather of the visual appearence.
正如@ceremcem指出的那样，当文本被复制粘贴时，框末尾的换行符不会被转移，这是有道理的，因为这些换行符不是文本格式的一部分，而是视觉外观的一部分。
pre-line:
前线：
white-space: pre-line
Sequences of white space are collapsed. Lines are broken at newline characters, at
<br>, and as necessary to fill line boxes.
空白序列被折叠。换行符、 at
<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>EDIT 08/14/2018:
编辑 08/14/2018：
In Chrome you might experience troubles: Pressing Enterwill generate a new <div>inside your contenteditable. To prevent that you can either press Shift+Enteror set display: inlineto the contenteditable <div>as seen in the fiddle.
在 Chrome 中，您可能会遇到麻烦：按下Enter将<div>在您的 contenteditable 中生成一个新的。为了防止这种情况，您可以按Shift+Enter或设置display: inline为 contenteditable，<div>如小提琴所示。
回答by andi
You could search and replace newlines with <br />.
http://jsfiddle.net/fPv6S/1/
您可以搜索和替换换行符<br />。
http://jsfiddle.net/fPv6S/1/
回答by Subham Debnath
Try this......
尝试这个......
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,"");
That will do it...
这样就可以了...
