在 textarea 中保留换行符答案

【问题标题】：Preserve line breaks in textarea在 textarea 中保留换行符
【发布时间】：2015-08-16 01:40:33
【问题描述】：

我有一个带有文本区域的表单，我想在输出内容时保留用户输入的换行符。

例如，如果我在 textarea 中写：

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

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

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

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

如何保留换行符？

【问题讨论】：

标签： html css textarea line-breaks

【解决方案1】：

用户输入的换行符保留，html和php都不会简单地删除或更改任何内容。然而，html 标记在为可视化呈现时使用不同方式来编码换行符。这有非常充分的理由。所以你要做的就是将现有的换行符“翻译”成html样式的换行符。

如何做到这一点取决于您工作的环境。通常，您必须将\n 之类的换行代码转换为<br> 标签。 php 脚本语言为此提供了一个功能，例如：nl2br()

但请注意：这仅适用于将文本呈现为 html 标记的情况。这不适用，当您再次将文本输出到表单内的文本区域以允许更改它时。在这种情况下，您必须保留收到的原始换行符。

因此，您通常会做的是：将未更改的文本输入保存为收到的内容。当再次将该文本输出到客户端时，例如从您之前保存它的数据库中读取它之后，您就会知道情况，文本将如何呈现。那是您翻译或保留现有换行符的时候。

您可以还通过<pre>...</pre>标签对包含换行符的未更改文本进行编码，因此将它们标记为呈现为预格式化。例如，在 html 页面中显示源代码时会这样做。

【讨论】：

为什么这个论坛充满了这样的问题，所有的答案都相似，而我已经在许多不同的项目中遇到这个问题大约 5 年了？！我尝试过使用 javascript hacks、pre 标记、CSS 空白规则，但似乎没有任何效果。这些项目中的大多数都是 Python webapps，使用 Flask 或 Pyramid 和（当然）Javascript。我通常在 Chrome 中调试，所以这似乎是最麻烦的浏览器。即使在此评论字段中输入并按回车键也会删除所有换行符！那么怎么会有这么多人认为这不是问题？！？！
抱歉，我刚刚注意到，当您单击编辑时，确实会再次呈现换行符...证明它们已发送到服务器并保存在数据库中。但我发誓我遇到这个问题的次数比我过去数的要多。
@Kenny83 好的，你明白了背后的想法。如前所述：这两种表达换行符有充分的理由。 not 表示在删除换行符的应用程序中可能没有过滤步骤。我只是说在 html 或 php 中没有自动过滤器或类似的东西。
我很抱歉，我并不是有意以一个自以为是的 a$$ 的身份出现，我显然有。我的沮丧仅仅是因为是的，很多人对此没有问题，但我有，其他人显然也有，因此他们发布了这些问题。我想我们只是不太了解如何将换行符发送到服务器等。您能否向我解释一下为什么在 Chrome 开发工具中放置一个 Javascript 断点，在表单提交处理程序的第一行，并检查 textarea 的值显示“第一行第二行第三行”而不是“第一行\n第二行\n第三行”？
嗯，很有趣...谢谢，我会试一试。还只是在服务器上设置了一个 Python 断点，并注意到那里收到的值肯定是“第一行第二行第三行”而不是“第一行\n第二行\n第三行”......所以我怀疑 JQuery、Javascript 本身或其他东西客户端正在妨碍...无论如何感谢您的帮助，我一定会尝试使用 hexeditor :-)

【解决方案2】：

一般你只需要添加

white-space: pre-line; 空白被修剪为单个空白或
white-space: pre-wrap; 保留所有空格

到元素的样式 (CSS)，您希望在其中使用换行符呈现文本。

【讨论】：

太棒了，太棒了！
@lovecoding 爱用户名
但是，如果单词超过容器的宽度，这也会换行，因此它不适用于 仅在原始文本有换行符时才需要换行符的情况，否则有溢出（水平滚动）。在这种情况下，您可以使用white-space: pre。

【解决方案3】：

您将输出保持在 textarea 中。您将收到作为字符串输出的输入，string(write to file) 该字符串将 textarea 添加到输入字符串。

for eg.
<?php
$txt = $_POST["inputstr"];
$txt1 = "<textarea>". $txt ."</textarea>";
$file = fopen("file.html","a+");
fwrite($file, $txt1);
fclose($file);
?>

【讨论】：

【解决方案4】：

你可以这样做：

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

【讨论】：