保留textarea中的换行符

Sim*_* M. 47 html css textarea line-breaks

我有一个带有textarea的表单,我希望在输出内容时保留用户输入的换行符.

例如,如果我在textarea写:

这是一个句子.这是另一个.还有一个.

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

我想要相同的输出而不是:

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

我怎么能保留换行符?

小智 113

通常你只需要添加

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

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

到元素的样式(CSS),您希望使用换行符呈现文本.

  • 但是,如果单词超过容器的宽度,这也会包裹单词,因此在您**只需要在原始文本有换行符的情况下换行**,否则会溢出(水平滚动)的情况下,它不起作用。在这种情况下,你可以只使用“white-space: pre”。 (2认同)

ark*_*cha 6

换行输入的用户都保留下来,既不HTML,也不PHP直接丢弃或改变任何东西.但是,html标记在为可视化渲染时使用不同的方式来编码换行符.有非常好的理由.所以你要做的就是将现有换行符"翻译"成html样式换行符.

如何做到这取决于你正在工作的环境.通常,您必须将换行符代码转换\n为<br>标记.该php脚本语言提供了一个功能,这个例如:nl2br()

请注意:这仅适用于将文本呈现为html标记时.但这并不适用,当你输出的文本转换成表格内的textarea再次允许改变它的例子.在这种情况下,您必须保持原始换行符.

所以你通常做的是:保存未收到的未更改的文本输入.当再次将该文本输出到客户端时,比如从之前已保存它的数据库中读取该文本后,您就会知道情况,文本将如何呈现.那就是你要翻译或保留现有的换行符.

您还可以使用<pre>...</pre>标记对包含换行符的未更改文本进行编码,因此将它们标记为要预先格式化.例如,这是在html页面中显示源代码时完成的.


小智 6

你可以做:

white-space: pre-wrap;
overflow-wrap: break-word;
Run Code Online (Sandbox Code Playgroud)