如何使 <textarea> 中的空白行为和 HTML 预览匹配？答案

【问题标题】：How do I make the whitespace behaviour in a <textarea> and a HTML preview match?如何使 <textarea> 中的空白行为和 HTML 预览匹配？
【发布时间】：2012-10-25 01:40:53
【问题描述】：

我有一个<textarea> 元素。当用户填写它时，您可以看到他们制作的空格以及当他们按 Enter 键跳转到下一行时。

这很好，但是当我看到 HTML 输出时，结果会有所不同。这是一个没有换行符的没完没了的句子。

仅使用 HTML 或 JavaScript，我该如何解决这个问题？

【问题讨论】：

你的问题很模糊。如果您想获得回复，请发布一些代码
欢迎来到 SO。请分享您的代码或您试图获得好的答案！！！
我不认为这是模糊的。 OP 希望 textarea 中的换行行为与 HTML 输出相匹配。他不想使用成熟的 WYSIWYG 编辑器来解决问题，他是对的。

标签： javascript html textarea richtextbox

【解决方案1】：

如果您只是将在 textarea 中输入的内容作为 html 输出，您会看到这一点。对于初学者，您可以用&nbsp; 替换所有空格，用<br> 替换所有换行符。或者将输出放在<pre> 标签中。（在这两种情况下，您还需要用实体替换一些其他字符。）

【讨论】：

别忘了 CSS：white-space: pre

【解决方案2】：

你可能想要这样的东西：

<p style="white-space: pre-wrap"></p>
<p style="white-space: pre"></p>
<pre></pre>

pre-wrap:
Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks 
pre:
Whitespace is preserved by the browser. Text will only wrap on line breaks Acts like the <pre> tag in HTML

【讨论】：