渲染所有换行符，也可以在一个可信的div中渲染空格

Question

我有一个contenteditable div作为一个富文本框。我遇到的问题是我需要插入可以包含多个连续空格或换行符的文本。我需要忠实地保留所有这些，而不是被浏览器破坏。我试图插入一个额外的休息时间，因为我的＆＃34;尾随＆＃34;中断，甚至在<pre>内插入文本，其唯一的作用是使文本看起来像狗屎，除了不保留我的连续新行。

如何让浏览器停止修改我的文本，只渲染我告诉它渲染的文本。

为了澄清，通过上述内容，我的意思是文本＆＃34; \ n \ n＆＃34;，它自己经常插入。

文本是通过JavaScript插入的，不是用户输入的。例如，它从服务器 - 思考聊天消息中收到。我现在要删除我的代码，看看如果当前的答案没有解决，我能做出的最小例子是什么。

这是一个小提琴： http://jsfiddle.net/46Lqy1pv/

当您点击＆＃34; New Paragraph＆＃34;这是第一次，只有一行添加到渲染的文本框中，但我必须渲染两个换行符。

Answer 1

请参阅 white-space css规则：

p {
     white-space:pre-line;
}

＆＃13;

＆＃13;

body {
  font-family: "Courier New",Courier,mono;
}

p.pre {
    white-space: pre;
}

＆＃13;

<p class="pre">
With :
  /\_/\
=( °w° )=
  )   (  //
 (__ __)//
</p>
<p>
Without :
  /\_/\
=( °w° )=
  )   (  //
 (__ __)//
</p>

＆＃13;

＆＃13;

＆＃13;

Answer 2

Firefox和Chrome在渲染空的contenteditable div时有不同的行为。

（左：Firefox 35，右：Chrome 40）

如果div为空，则Firefox会隐藏div，Chrome会让用户通过将其高度调整为一行来对其进行编辑。

当您点击＆＃34;新段落＆＃34;按钮，两个浏览器在<br>中添加两个<div>，结果将是相同的：

这是因为Chrome将之前应用的默认样式删除到空的contenteditable div，因为它不再是空的。

---

一种可能的解决方案是在您的contenteditable div中添加<br>标记：

<div contenteditable="true" id="textdiv"><br/></div>

小提琴：http://jsfiddle.net/szkhe1b7/

Firefox用户将可以编辑div，而Chrome用户将获得两个新行＆＃34; New Paragraph＆＃34;点击。