这篇文章给大家分享的是有关css和html的textarea文字如何换行显示的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
我想在textarea中输入的文字，显示在网页中时，按照输入的时候的格式显示。
textarea输入问题
输入框中显示是这样的：两行文字有换行
clipboard.png
1、html如果这样写：
{{$article->content}}
显示结果如截图所示：两行文字不会换行
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文字如何换行显示”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！