怎样将文本区域中换行符转换成HTML的<br>阿

怎样将文本区域中换行符转换成HTML的<br>阿,第1张

在html中,换行符你光按Enter是没作用的,只能添加标签<br />或用标签<p></p>来分开段落!而如果你用说的第三方的ueditor编辑器,例如百度ueditor编辑器之类的,你只需要找到相应的JS文件,改动一下文本区域下一行定义的标签即可!例如有的编辑器按一下Enter可以得到<p></p><br />而有点只是得到<br />。如果以上都不是你想说的,那么你就得详细描述一下你想问的问题了!

在没有使用编辑器而是使用了文本域 <textarea>的情况下,用户所输入的内容呈现的效果并不理想,比如:原本的换行没有保留,全部成了单行显示。

要让在 <textarea>中输入的内容原格式输出有一下两种办法:

使用 <pre>标签是我最开始采用的办法,但是这种方法也有一定的缺陷,比如说我们在使用的编辑器的时候,换行、Tab、空格都会影响到输出结果。如图:

并且, <pre>标签本身自带得有一些样式,比如字体等。如果你的页面有引入bootstrap等css框架,那么受样式影响就更多了,你得再写去覆盖。

因此,这种方法并不推荐。

我们先来看一下 white-space 的定义和属性:

其属性有:

也就是说,我们可以使用 white-space:pre-warp 或 white-space:pre-line 达到我们想要的效果。

两者的区别是:

如图:

white-space:pre-warp 效果如下:

white-space:pre-line 效果如下:

因此,更推荐使用第二种方法。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6119447.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-15
下一篇 2023-03-15

发表评论

登录后才能评论

评论列表(0条)

保存