css和html的textarea文字如何换行显示

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

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

　　textarea输入问题

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

　　clipboard.png

　　1、html如果这样写：

　　<div>

　　<p>{{$article->content}}</p>

　　</div>

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

　　clipboard.png

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

　　.pre-text{

　　white-space:pre;

　　}

　　html代码如下：

　　<div>

　　<pclass="pre-text">{{$article->content}}</p>

　　</div>

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

　　.pre-text{

　　white-space:pre-wrap;

　　word-wrap:break-word;

　　word-break:break-all;

　　}

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

　　textarea解决方法

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

　　方法一、用样式解决：

　　<style>.pre-text{white-space:pre-wrap;}</style>

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

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

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