【vue、uni

2023-11-08 01:30| 来源: 网络整理| 查看: 265

【vue、uni-app】文本信息的完全显示（回车换行、连续空格、数字&英文换行）数据说明完整显示一、vue端1、不做处理的效果2、处理后二、uni-app端1、不做处理的效果2、处理后总结

记录学习的轨迹：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端 export default { data: { return { text：'具体文案见数据说明' } }, computed: { newText () { //空格默认占位四分之一[;]，改为占位二分之一的空格[ ] return this.text.replace(new RegExp(' ', 'gm'), ' ') } } } .kala_text { white-space: pre-wrap; word-break: break-word; } 样式 white-space: pre-wrap 可以保证文本原样输出（空格占位四分之一）样式 word-break: break-word 可以避免文字超出限制（break-word不会切断单词，break-all会无视单词完整性切断单词）方法 newText 可以使空格更改为占位二分之一的空格（如果无该需求可不写） 1、不做处理的效果

在这里插入图片描述

2、处理后

在这里插入图片描述

二、uni-app端 {{ text }} export default { data: { return { text：'具体文案见数据说明' } } } .kala_text { word-break: break-word; } 样式 word-break: break-word 可以避免文字超出限制（break-word不会切断单词，break-all会无视单词完整性切断单词）组件 text 直接可以设置空格的类型，可以说是很优秀了（uni-app Text文本组件） 1、不做处理的效果

在这里插入图片描述

2、处理后

在这里插入图片描述

总结

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

【本文地址】

公司简介

联系我们