vue项目
<Table border :columns="columns" :data="PageList" class="my-table" tooltip="true">
<template #mc="{row}" >
<Tooltip placement="right" :content="`${row.mc}`" max-width="200" transfer v-if="row.mc.length > 50">
<div :class="{'text': row.mc.length > 50}">{{ row.mc }}</div>
</Tooltip>
<div class="text" v-else>{{ row.mc }}</div>
</template>
</Table>
js
columnsCj:[
{
title: '信息',
key: 'mc',
width: 178,
align: 'center',
slot: 'mc'
}
]
css:此处使文字固定五行并显示省略号
.text {
width: 150px;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}