后端返回文本换行处理

文章发布于2020年04月12日 13:59, 归类于: 前端

设置white-space可以处理元素内的空白

white-space:pre-line;

为什么要设置white-space

在html中,特殊含义的符号不能直接使用, 需要使用转义字符串(Escape Sequence)才能使用。

当后端没有使用富文本编辑器,直接在<textarea> 标签内编辑、保存了一篇文本,文本中使用了多个回车换行,返回给前端显示,前端获取到的文本中有很多&#开头,;号结尾的符号,这就是转义字符。

浏览器默认忽略这些转义字符。

第一段文本&#10;第二段 1个空格间隔 文本&#10;第三段  2个空格间隔  文本     5个空格间隔     文本

前端把这篇文本放在 <p></p>标签内显示:

第一段文本 第二段 1个空格间隔 文本 第三段 2个空格间隔 文本 5个空格间隔 文本

打开浏览器,显示的页面并没有重现换行效果,文本的CSSwhite-space属性默认值为normal,空白符换行符等会被浏览器忽略。

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

把文本放在<p style="white-space: pre-line;></p>内显示:

第一段文本 第二段 1个空格间隔 文本 第三段 2个空格间隔 文本 5个空格间隔 文本

把文本放在<p style="white-space: pre-wrap;></p>内显示:

第一段文本 第二段 1个空格间隔 文本 第三段 2个空格间隔 文本 5个空格间隔 文本

总结

文本属性white-space的值为pre-line,多个空格将合并成一个;

文本属性white-space的值为pre-wrap,浏览器保留所有空格;

转载请注明来源:《 后端返回文本换行处理》- rojerYong's Blog

文章链接:https://www.eoway.cn/article/1586671171.html

如果此文摘取了你的原创,请联系本站管理员,将对此文修改、删除处理。

--END--
上一篇:微信小程序路由跳转 下一篇:koa2部署静态网站资源,文件缓存设置