分享 vxe-text-ellipsis table grid 多行文本溢出省略的用法

正常情況下如果需要使用文本超出隱藏，通過(guò) css 就可以完成

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

但是如果需要實(shí)現(xiàn)多行文本溢出，就很難實(shí)現(xiàn)里，谷歌瀏覽器雖然支持 css 多行溢出，大部分瀏覽器又不支持，所以很難使用原生 css 來(lái)實(shí)現(xiàn)，可以通過(guò) vxe-text-ellipsis 來(lái)實(shí)現(xiàn)多行文本溢出隱藏。

安裝

npm install vxe-pc-ui@4.3.6 vxe-table@4.9.9

 // ...import VxeUI from 'vxe-pc-ui'import 'vxe-pc-ui/lib/style.css'import VxeUITable from 'vxe-table'import 'vxe-table/lib/style.css'// ...createApp(App).use(VxeUI).use(VxeUITable).mount('#app')// ...

參數(shù) line-clamp 用于指定多少行自動(dòng)隱藏溢出。

單行文本溢出

<template><div style="width: 400px;"><vxe-text-ellipsis line-clamp="1" content="這是一個(gè)單行文本，超出一行之后會(huì)自動(dòng)截?cái)?#xff0c;并且會(huì)出現(xiàn)省略，后面文字會(huì)被隱藏將不會(huì)被顯示出來(lái)。"></vxe-text-ellipsis></div>
</template>

多行文本溢出

<template><div style="width: 400px;"><vxe-text-ellipsis line-clamp="4" content="這是一個(gè)多行的文本溢出省略組件，用于實(shí)現(xiàn)多行文本溢出省略，這將非常有用，如果沒(méi)有超出，則顯示全部文本，如超出指定行數(shù)之后，文字會(huì)被會(huì)自動(dòng)截?cái)?#xff0c;并且會(huì)出現(xiàn)省略，后面文字會(huì)被隱藏將不會(huì)被顯示出來(lái)。"></vxe-text-ellipsis></div>
</template>

在表格中使用

<template><div><vxe-grid v-bind="gridOptions"></vxe-grid></div>
</template><script>
export default {data () {const addressCellRender = {name: 'VxeTextEllipsis',props: {lineClamp: 3}}const gridOptions = {border: true,height: 500,columns: [{ type: 'seq', width: 70 },{ field: 'name', title: 'Name' },{ field: 'sex', title: 'Sex', width: 100 },{ field: 'address', title: '多行文本溢出省略', width: 400, cellRender: addressCellRender }],data: [{ id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: '這是一個(gè)多行的文本溢出省略組件，用于實(shí)現(xiàn)多行文本溢出省略，這將非常有用，如果沒(méi)有超出，則顯示全部文本，如超出指定行數(shù)之后，文字會(huì)被會(huì)自動(dòng)截?cái)?#xff0c;并且會(huì)出現(xiàn)省略，后面文字會(huì)被隱藏將不會(huì)被顯示出來(lái)。' },{ id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: '這是一個(gè)多行的文本溢出省略組件' },{ id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: '這是一個(gè)多行的文本溢出省略組件，用于實(shí)現(xiàn)多行文本溢出省略' },{ id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: '這是一個(gè)多行的文本溢出省略組件，用于實(shí)現(xiàn)多行文本溢出省略，這將非常有用，如果沒(méi)有超出，則顯示全部文本，如超出指定行數(shù)之后，文字會(huì)被會(huì)自動(dòng)截?cái)?#xff0c;并且會(huì)出現(xiàn)省略，后面文字會(huì)被隱藏將不會(huì)被顯示出來(lái)。' },{ id: 10005, name: 'Test5', role: 'Designer', sex: 'Women', age: 42, address: '這是一個(gè)多行的文本溢出省略組件' },{ id: 10006, name: 'Test6', role: 'PM', sex: 'Women', age: 36, address: '這是一個(gè)多行的文本溢出省略組件' },{ id: 10007, name: 'Test7', role: 'Test', sex: 'Women', age: 39, address: '這是一個(gè)多行的文本溢出省略組件，用于實(shí)現(xiàn)多行文本溢出省略，這將非常有用，如果沒(méi)有超出，則顯示全部文本，如超出指定行數(shù)之后，文字會(huì)被會(huì)自動(dòng)截?cái)?#xff0c;并且會(huì)出現(xiàn)省略，后面文字會(huì)被隱藏將不會(huì)被顯示出來(lái)。' },{ id: 10008, name: 'Test8', role: 'Designer', sex: 'Women', age: 56, address: '這是一個(gè)多行的文本溢出省略組件' }]}return {gridOptions,addressCellRender}}
}
</script>

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