在文本框中保留换行

Question

我有一个表单，其中包含一段文本区域，并希望在输出内容时保留用户输入的换行符。

例如，如果我在文本区域中写入：

 

这里是一个句子。这里是另一个。这里还有一个。

    

这是一个新段落。这里是一个新句子。这里是另一个。

我想要相同的输出，而不是：

 

这里是一个句子。这里是另一个。这里还有一个。这是一个新段落。这里是一个新句子。这里是另一个。

如何保留换行符？

- Simon M.

Answer 1

通常您只需要将

• white-space: pre-line; 空格修剪为单个空格 或者

• white-space: pre-wrap; 保留所有空格

添加到元素的样式 (CSS) 中，即可在渲染文本时使用换行符。

- Vaidotas Pocius

---

太棒了，太好了！ - LoveCoding

然而，这也会在单词超出容器宽度时换行，因此在仅希望在原始文本中存在换行符的情况下进行换行，并且否则会溢出（水平滚动）的情况下，它将无法正常工作。在这种情况下，您可以使用 white-space: pre。 - Spacha

为什么会感觉像魔法一样？ - Faizan Ahmad

希望我能给这个更多的赞，我以为编辑我捕获的数据并进行某种正则表达式匹配（我真的不理解）或其他操作来重新显示它会是一个真正的挑战。但事实上只需要复制粘贴一行简短的CSS代码，问题就解决了！ - MonsterBasket

谢谢，这真的非常有效！！只是一个小提示，因为我一开始遇到了这个问题：确保在您的HTML中编写具有此属性的元素时不要缩进，否则它将显示为空格。 - aeron13

Answer 2

用户输入的换行符被保留，无论是HTML还是PHP都不会删除或更改任何内容。但是，当渲染为可视化时，HTML标记使用了一种不同的方式来编码换行符。这样做有很好的原因。所以你需要做的是将现有的换行符“翻译”成HTML样式的换行符。

如何做取决于您所在的环境。通常情况下，您需要将类似于\n之类的换行符代码翻译为<br>标签。例如，PHP脚本语言提供了一个函数：nl2br() 但是要注意：仅当以HTML标记形式“呈现”文本时才适用。当您再次将文本输出到表单内的文本区域中以便进行更改时，这是无效的。在这种情况下，您必须保留接收到的原始换行符。

因此，您通常要保存未经修改的文本输入。在从以前保存该文本的数据库中读取后再次向客户端输出该文本时，您就知道了该文本将如何呈现。这是您将翻译或保留现有换行符的时候。

您还可以通过使用<pre>...</pre>标记对包含换行符的未经修改的文本进行编码，以将其标记为预格式化渲染。例如，在HTML页面中显示源代码时就会这样做。

- arkascha

---

为什么这个论坛充满了像这样的问题，所有的答案都很相似，而我在许多不同的项目中已经遇到了这个问题约5年？！我尝试过使用JavaScript hack、pre标签、CSS空格规则，但似乎都没有用。大多数这些项目都是Python web应用程序，使用Flask或Pyramid和（当然）JavaScript。我通常在Chrome中进行调试，所以这个浏览器似乎遇到了最多的麻烦。即使在这个评论框中输入并按回车键也会删除所有换行符！那么怎么会有这么多人认为这不是一个问题呢？！？ - Kenny83

非常抱歉，我刚刚注意到当您点击编辑时，确实会再次呈现换行符...这证明它们确实被发送到服务器并保存在数据库中。但我发誓过去遇到过这个问题的次数比我能数得清的还要多。 - Kenny83

啊，抱歉，我误解了您之前的评论。听起来好像控制台显示不可打印字符的方式就是这样。不知道。最好的方法是将相关序列转储到十六进制编辑器中，并查看实际存储的内容。 - arkascha

@Kenny83 我认为这里唯一的“问题”就是某些字符在常规意义上是“不可打印”的。因此，无法满足人类对字符外观的期望。这意味着我们必须使用替代方法来理解正在发生的事情。当然，这并不完美，但总比没有好... - arkascha

嗯，有趣...谢谢，我会试一下的。另外，在服务器上设置了一个Python断点，发现接收到的值确实是"line one line two line three"，而不是"line one\nline two\nline three"，所以我怀疑是JQuery、Javascript本身或客户端的其他东西在干扰...无论如何，感谢您的帮助，我一定会尝试使用十六进制编辑器 :-) - Kenny83

Answer 3

你可以做以下事情：

white-space: pre-wrap;
overflow-wrap: break-word;

- Eden Sharvit

Answer 4

如果你喜欢的话，你可以通过在文本区域字段上注册事件监听器来避免换行符的出现，方法如下：

$("textarea").off("keyup").on("keyup", e => { var t = $(e.target); t.val(t.val().replaceAll("\n", " ")); })

FYI：那是用jQuery完成的。

- Emre Pişirici

Answer 5

你需要将输出保留在文本区域中。你将接收到一个作为字符串输出的输入，该字符串是将添加到输入字符串中并写入文件的字符串。</p> <pre class="guess-PHP"><code>for eg. <?php $txt = $_POST["inputstr"]; $txt1 = "<textarea>". $txt ."</textarea>"; $file = fopen("file.html","a+"); fwrite($file, $txt1); fclose($file); ?> </code></pre>

- awadhesh