css和html的textarea文字如何换行显示-创新互联
这篇文章给大家分享的是有关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文字如何换行显示”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
文章名称:css和html的textarea文字如何换行显示-创新互联
URL分享:http://pwwzsj.com/article/gspdi.html