iview table 文字过长 固定五行加省略号tooltip展示全部内容

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;
    }