简单的解决textarea文本框内容换行,对应到页面的内容也换行的问题

当我们在页面上通过 textarea 提交数据的时候,我们输入的内容在提交后都会被处理为了一段内容,即使我们在 textarea 里面输入了很多的换行,提交后也是一段内容,那如果我们需要将我们输入的信息按照输入的形式保存下来该如何做呢?


最近项目中就遇到了这样一个需求,页面左边是展示部分,右边是表单用来添加资料,

表单里有textarea文本框,在里面输入内容,可以回车换行,然后点提交数据库后,对应到左边的div或其他标签里的内容也对应的换行。


有一些复杂点的实现方式:比如使用百度UEditor编辑器,

或者在存储到数据库之前,将“\n"替换为"<br>", 然后在保存到数据库中,页面中显示的时候做正好相反的处理。


以上做法不作详解, 今天说一种简单的方法:给展示文本框内容的页面标签添加以下的style即可!

style= "white-space: pre-wrap;"

下面我们复习一下white-space 的属性设置:

normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
pre-wrap 保留空白符序列,但是正常地进行换行。
pre-line 合并空白符序列,但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。

......


  • 9
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值