uni-app development applet: complete display of text information (carriage return, line feed, continuous spaces, numbers & English line feed)

1. The effect picture to be realized:

2. Code implementation:

1. uniapp applet terminal

<template>
  <text class="my_text" space="ensp">{
   
   {content}}</text>
</template>
<script>
export default {
      
      
  data: {
      
      
    return {
      
      
      content：'这是我的  测试文字'
    }
  }
}
</script>
<style scoped>
	.my_text{
      
      
	  word-break: break-word;  //可以避免文字超出限制
	}
</style>

2. vue edge

<template>
  <span class="my_text " v-html="content"></span>
</template>
<script>
export default {
      
      
  data: {
      
      
    return {
      
      
      content：'这是我的  测试文字'
    }
  },
  computed: {
      
      
    newText () {
      
      
      //空格默认占位四分之一[&nbsp;]，改为占位二分之一的空格[&ensp;]
      return this.text.content(new RegExp(' ', 'gm'), '&ensp;')
    }
  }
}
</script>
<style scoped>
	.my_text {
      
      
	  white-space: pre-wrap;
	  word-break: break-word;
	}
</style>

ok~