uni-app開発アプレット：テキスト情報の完全表示（キャリッジリターン、ラインフィード、連続スペース、数字、英語改行）

1. 実現される効果のイメージ:

2. コードの実装:

1. uniapp アプレットターミナル

<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端

<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>

わかりました〜