nvue中text标签超出无法自动换行,并且高度无法自动撑起,的解决方案

<template>
    <text>的撒打算大神件大事良好的记得开撒娇断开链接阿斯卡纶讲道理看的撒几点回家卡手机的看</text>
</template>

问题1:当你在nvue中使用 text 标签,你会发现文字超出一行后无法自动换行
解决方案1:给 text 标签加上,宽度

问题2 : 这时你可能还会问,我怎么才能不设置宽度的情况下,比如父级标签使用 flex:1;,让text自动换行呢?
解决方案2:可以使用rich-text来替代text,需要注意的是rich-text传入nodes不能为Html string,需要自行转换下,官方提供了html-parse.js,使用如下

方案2好处就是不需要设置宽度,内容会自动撑起,自动换行

<template>
        <rich-text class="text" :nodes="computeNodes(node.text)"></rich-text>
</template>

<script>
    import htmlParse from '../libs/htmlParse';
    export default {
        name: 'wxParseTemplate0',
        props: {
            node: {},
        },
        computed:{
            computeNodes(){
                return (text)=>{return htmlParse(text)
                }
            }
        },
        methods: { },
    };
</script>
<style scoped lang="scss"></style>

 

posted @ 2022-07-14 15:22  奔跑吧前端(李钊)  阅读(2700)  评论(0编辑  收藏  举报