当我们在页面上通过 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 属性的值。 |