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

时间：2024-11-27 18:00:42

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

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

但是如果需要实现多行文本溢出，就很难实现里，谷歌浏览器虽然支持 css 多行溢出，大部分浏览器又不支持，所以作用也不大。

可以通过 vxe-text-ellipsis 来实现多行文本溢出隐藏。

安装

npm install vxe-pc-ui

// ...
import VxeUI from 'vxe-pc-ui'
import 'vxe-pc-ui/lib/style.css'
// ...

createApp(App).use(VxeUI).mount('#app')
// ...

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

单行

{69006204-F604-42B2-BF13-D774F909C534}.png

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

多行

{2E94270C-225B-46F9-8803-3DB3DA00177D}.png

<template>
  <div style="width: 400px;">
    <vxe-text-ellipsis line-clamp="4" content="这是一个多行的文本溢出省略组件，用于实现多行文本溢出省略，这将非常有用，如果没有超出，则显示全部文本，如超出指定行数之后，文字会被会自动截断，并且会出现省略，后面文字会被隐藏将不会被显示出来。"></vxe-text-ellipsis>
  </div>
</template>

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

相关文章