uni-app开发小程序：文本信息的完全显示（回车换行、连续空格、数字&英文换行）

小跳不会Coding

已于 2023-04-24 17:07:40 修改

阅读量2.6k

点赞数

文章标签： uni-app vue 小程序

于 2023-04-24 17:07:22 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_48596030/article/details/130347077

版权

本文介绍了在uniapp小程序端和Vue端如何实现文本的显示效果，包括使用<text>标签和<span>标签，以及应用CSS样式如word-break和white-space来控制文字换行和避免超出限制。在Vue中，还展示了如何用正则表达式替换空格并使用v-html指令。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>