今天只所以用到这个属性是因为在我新增数据完成后,后端开发在msg中返回给了我一堆信息,信息里面携带了换行符\r\n,让我根据其结果进行换行,因为以前很少使用这个属性,都有点忘记了,特地记录一番。我们使用的前端框架是vue,直接上代码:msg是后端返回的携带换行符的返回值。
<p style="white-space:pre-line">{{msg}}</p>
顺便普及一下该属性:
white-space是CSS属性用来处理元素中的空白。它共有6个属性值:normal、pre、nowrap、pre-wrap、pre-line、inherit。
normal:是默认值,空白会被浏览器忽略。
pre:空白会被浏览器保留。
nowrap:空白不会被浏览器保留,文本会在同一行显示,不会换行,除非遇到<br>。
pre-wrap:可以正常的换行,但是会保留空白符。
pre-line:合并空白符,但是也会保留换行符,即会换行。
inherit:会继承父元素的white-space属性的值。