记录学习的轨迹: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 () {
//空格默认占位四分之一[ ],改为占位二分之一的空格[ ]
return this.text.replace(new RegExp(' ', 'gm'), ' ')
}
}
}
</script>
<style scoped>
.kala_text {
white-space: pre-wrap;
word-break: break-word;
}
</style>
- 样式 white-space: pre-wrap 可以保证文本原样输出(空格占位四分之一)
- 样式 word-break: break-word 可以避免文字超出限制(break-word不会切断单词,break-all会无视单词完整性切断单词)
- 方法 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>
- 样式 word-break: break-word 可以避免文字超出限制(break-word不会切断单词,break-all会无视单词完整性切断单词)
- 组件 text 直接可以设置空格的类型,可以说是很优秀了(uni-app Text文本组件)
1、不做处理的效果
2、处理后
总结
到这就ok啦。对于空格类型的问题,如果是需要占位四分之一的空格,Vue端可以不用计算替换那一步,uni-app的space参数改成nbsp即可。占位一个格子的空格同理。