网站seo快速优化技巧,品牌推广经典案例,seo插件wordpress,wordpress woocommerce 支付宝有时我们会遇到这种情况#xff0c;后端传递了一大段包含了回车符的文本内容#xff0c;前端展示的时候所有文字堆在一起#xff0c;没有换行展示。
以下方法中content为后端返回的文本内容
方法一#xff1a;
“↵”符号在html中会识别别为\r,\n等转义字符#xff0c;…有时我们会遇到这种情况后端传递了一大段包含了回车符的文本内容前端展示的时候所有文字堆在一起没有换行展示。
以下方法中content为后端返回的文本内容
方法一
“↵”符号在html中会识别别为\r,\n等转义字符所以我们可以使用\r\n去替换.replace(/(\r\n|\n|\r)/gm, ’ br /)
div v-htmlcontent.replace(/(\r\n|\n|\r)/gm, br /)/div
方法二
使用pre标签 它会自动识别和处理后台返回的换行符号
pre{{content }}/pre
方法三
white-space样式
div classlogDetail{{ content }}/div
css样式
.logDetail {white-space: pre-wrap;/* white-space:pre-line; */
} white-space CSS 属性是用来设置如何处理元素中的 空白。 pre-wrap:连续的空白符会被保留。在遇到换行符或者 br 元素或者需要为了填充「行框盒子(line boxes)」时才会换行。 pre-line连续的空白符会被合并。在遇到换行符或者 br 元素或者需要为了填充「行框盒子(line boxes)」时会换行。 方法四
(下面是在Vue中实现的所有框架思想一样)
templatediv v-htmlcontentFormat/div
/template
script
export default {data(){return{//存储后端返回的文本content:,}},//计算属性与data同级computed: {contentFormat() {//this.content存储后端传回来的文本数据就是要对这个数据进行处理let arr this.content.split();return arr.map((item) {return item \n ? br : item;}).join();},},methods:{getData(){....this.contentxxx;}}
}
/script 思想将文本字符串转化为数组然后将数组中“\n”换成浏览器正常解析的换行标签br即可。(后端传回来的“↵”就是\r\n)上面同样可以使用正则表达式来将字符串的换行符转换为 br 那么就不用转换为数组了。
