【vue、uni-app】文本信息的完全显示（回车换行、连续空格、数字&英文换行）

记录学习的轨迹：2021-12-03
故事背景：最近工作遇到的问题，输入富文本的时候允许使用换行和空格，但是复现的时候会丢失，据说是因为vue2.6版本升级之后页面template中的换行和空格都被过滤了,不管打印多少都会只打印一个。

需要注意的点
因为我这边是需要 vue端、uniapp端 同时满足显示要求，所以我会分两个部分说明处理方法

数据说明

    一旦天线下降，锐气便被冰雪覆盖，玩世不恭、自暴自弃油然而生，即使年方二十，实已垂垂老矣;然则只要树起天线，捕捉乐观信号，你就有望在八十高龄告别尘寰时仍觉年轻。
    I have often thought it would be a blessing if each human being were stricken blind and deaf for a few days at some time during his early adult life. Darkness would make him more appreciative of sight; silence would teach him the joys of sound.
    是111111111111111111111111111111111111111111111111111111111111111111111

图片：

上述附带元素：

• 文字、英文、数字
• 首行空格
• 回车换行

完整显示

我这边的项目要求，是需要在Vue的web端，和uni-app的小程序端显示，两端的写法略有区别，我这边做区分显示

一、vue端

<template>
  <span class="kala_text" v-html="text"></span>
</template>
<script>
export default {
  data: {
    return {
      text：'具体文案见数据说明'
    }
  },
  computed: {
    newText () {
      //空格默认占位四分之一[&nbsp;]，改为占位二分之一的空格[&ensp;]
      return this.text.replace(new RegExp(' ', 'gm'), '&ensp;')
    }
  }
}
</script>
<style scoped>
.kala_text {
  white-space: pre-wrap;
  word-break: break-word;
}
</style>

1. 样式 white-space: pre-wrap 可以保证文本原样输出（空格占位四分之一）
2. 样式 word-break: break-word 可以避免文字超出限制（break-word不会切断单词，break-all会无视单词完整性切断单词）
3. 方法 newText 可以使空格更改为占位二分之一的空格（如果无该需求可不写）

1、不做处理的效果

2、处理后

二、uni-app端

<template>
  <text class="kala_text" space="ensp">{{ text }}</text>
</template>
<script>
export default {
  data: {
    return {
      text：'具体文案见数据说明'
    }
  }
}
</script>
<style scoped>
.kala_text {
  word-break: break-word;
}
</style>

1. 样式 word-break: break-word 可以避免文字超出限制（break-word不会切断单词，break-all会无视单词完整性切断单词）
2. 组件 text 直接可以设置空格的类型，可以说是很优秀了（uni-app Text文本组件）

1、不做处理的效果

2、处理后

总结

到这就ok啦。对于空格类型的问题，如果是需要占位四分之一的空格，Vue端可以不用计算替换那一步，uni-app的space参数改成nbsp即可。占位一个格子的空格同理。