后端返回文本换行处理
设置white-space可以处理元素内的空白
white-space:pre-line;
为什么要设置white-space
在html中,特殊含义的符号不能直接使用, 需要使用转义字符串(Escape Sequence)才能使用。
当后端没有使用富文本编辑器,直接在<textarea>
标签内编辑、保存了一篇文本,文本中使用了多个回车换行,返回给前端显示,前端获取到的文本中有很多&#
开头,;
号结尾的符号,这就是转义字符。
浏览器默认忽略这些转义字符。
第一段文本 第二段 1个空格间隔 文本 第三段 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--
推荐
- 微信小程序打包,主包和分包都小于2m,却上传失败
- 微信公众号网页,微信jssdk需要刷新页面才可以使用
- uniapp 微信小程序背景音频播放 uni.getBackgroundAudioManager()
- uniapp 苹果授权登录
- uniapp app 跳转到微信小程序
- js常用方法
- css 变量
- uniapp 微信公众号网页 打开小程序
- 小程序分享到朋友圈时设置path的query参数,判断用户是否通过朋友圈进入小程序
- uniapp解决原生组件层级过高覆盖页面组件的问题
- js判断是否ie浏览器、ie浏览器版本
- uniapp 设置 APP 首次打开时显示“用户协议和隐私政策”弹框
- uniapp,app端打开第三方应用(高德地图、百度地图、腾讯地图,apple地图进行导航)
- uniapp,ios打开apple地图显示自定义地点信息
- 微信小程序通过map组件获取中心点高精度经纬度以及解决ios系统map组件moveToLocation无效问题
- web性能优化,使用preload和prefetch预加载资源