文本内容过多，显示省略号...，鼠标悬浮显示全部

1.表格中title的方法
1.1明确想要操作的单元格，对应单元格加上可以操作的语句

{
    title: "案件描述",
    scopedSlots: { customRender: "caseDes" },
    width: "50%",
  },

1.2 方法一：第一步完成后进行1.2
1.2.1 操作对应单元格，加入css样式

           <a-tooltip placement="top" >
                <template slot="caseDescription" slot-scope="text, record">
                <span
                  class="case_ms"
                  @click="alldetail(record.caseDescription)"
                  >{{ record.caseDescription }}</span
                >
              </template>
              </a-tooltip>

1.2 对应css中写入样式

.case_ms{
display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: black;
}

1.3 方法二：第一步完成后进入1.3

<template slot="caseDes" slot-scope="text, record">
                    <div :title="record.caseDescription" style="overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;">
                      {{record.caseDescription}}
                    </div>
                  </template>

style也可以是

style="overflow: hidden;text-overflow: ellipsis;max-width: 100px !important;white-space: nowrap;"

2.不是表格中的，直接引用ant-design

max-width: 300px !important;//设置最大宽度
  overflow: hidden;
  white-space: nowrap;//设置不能换行
  text-overflow: ellipsis;//显示省略号

white-space：设置段落中的文字不进行换行
text-overflow：设置当文本溢出这个包含他的元素的时候做什么操作

1. clip—剪切文本
2. ellipsis—显示省略号代替被修剪的文本
3. string—使用给定的字符串来代表被修剪的文本
   另一种盒子模型方法

    display: -webkit-box; 将对象作为弹性伸缩盒子模型显示
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 3;限制在一个块元素中显示文本的行数
	-webkit-box-orient:vertical;设置伸缩盒子的子元素的排列方式