css和html的textarea文字如何换行显示-创新互联

这篇文章给大家分享的是有关css和html的textarea文字如何换行显示的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

我想在textarea中输入的文字，显示在网页中时，按照输入的时候的格式显示。

textarea输入问题

输入框中显示是这样的：两行文字有换行

clipboard.png

1、html如果这样写：

显示结果如截图所示：两行文字不会换行

clipboard.png

2、html中加一个white-space:pre;

.pre-text{

white-space:pre;

}

html代码如下：

结果如下面截图：两行文字会换行，但会超出外面的div

.pre-text{

white-space:pre-wrap;

word-wrap:break-word;

word-break:break-all;

}

在后台用textarea保存的文字内容，内容中有换行，但在页面显示的时候，一般不会再显示出换行，

textarea解决方法

原因是textarea保存的换行符（\r\n）html不识别

方法一、用样式解决：

方法二、用脚本或后台程序处理下，换行符，直接把换行符替换成br标签

functionfixText(text){varreplaceRegex=/(\n\r|\r\n|\r|\n)/g;text=text||'';returntext.replace(replaceRegex,"
");}

感谢各位的阅读！关于“css和html的textarea文字如何换行显示”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！