Vue3Marquee 文字滚动插件

对于文字过长时：

我们通常使用省略号的方式进行处理

overflow: hidden;

text-overflow: ellipsis; 

display: -webkit-box; 

-webkit-box-orient: vertical; 

-webkit-line-clamp: 1;

或者尝试利用滚动显示出全部文字呢？

npm install vue3-marquee@latest --save

页面引入

import { Vue3Marquee } from 'vue3-marquee'

import 'vue3-marquee/dist/style.css'

HTML结构

<Vue3Marquee v-if="isOverflow(lis.name)">

    <span>{{ lis.name }}</span>

</Vue3Marquee>

<span v-else>{{ lis.name }}</span>

判断显示时，我们利用JS判断字符串长度，同时应该考虑到中文、英文的长度差别较大；

const isOverflow = (text) => {
    // 涉及多语言需要多加一层判断
    if(text.length > 6){
        return true;
    }
}