vxe-text-ellipsis vue 中使用 css 多行文本溢出

正常情况下如果需要使用文本超出隐藏，通过 css 就可以完成

1. overflow: hidden;
2. text-overflow: ellipsis;
3. white-space: nowrap;

复制代码

但是如果需要实现多行文本溢出，就很难实现里，谷歌浏览器虽然支持 css 多行溢出，大部分浏览器又不支持，所以作用也不大。
可以通过 vxe-text-ellipsis 来实现多行文本溢出隐藏。
安装

1. npm install vxe-pc-ui

复制代码

1. // ...
2. import VxeUI from 'vxe-pc-ui'
3. import 'vxe-pc-ui/lib/style.css'
4. // ...
6. createApp(App).use(VxeUI).mount('#app')
7. // ...

复制代码

参数 line-clamp 用于指定多少行自动隐藏溢出。
单行

1. <template>
2.   
3.     <vxe-text-ellipsis line-clamp="1" content="这是一个单行文本，超出一行之后会自动截断，并且会出现省略，后面文字会被隐藏将不会被显示出来。"></vxe-text-ellipsis>
4.   
5. </template>

复制代码

多行

1. <template>
2.   
3.     <vxe-text-ellipsis line-clamp="1" content="这是一个单行文本，超出一行之后会自动截断，并且会出现省略，后面文字会被隐藏将不会被显示出来。"></vxe-text-ellipsis>
4.   
5. </template>

复制代码

在表格中使用

1. <template>
2.   
3.     <vxe-text-ellipsis line-clamp="1" content="这是一个单行文本，超出一行之后会自动截断，并且会出现省略，后面文字会被隐藏将不会被显示出来。"></vxe-text-ellipsis>
4.   
5. </template>

复制代码

https://github.com/x-extends/vxe-pc-ui

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！