p {
    margin-top: 12px;
    width: 80px;
    height: 56px;
    line-height: 28px;
    color: #FFFFFF;
    font-size: 20px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    text-align: left;
    // 2行显示省略号
    overflow: hidden;
    display: -webkit-box; 
    word-break: break-all;
    // 省略号显示
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; 
    // 在恰当的断字点进行换行
    word-break: normal;
    // white-space属性设置如何处理元素内的空白
    white-space: normal;
    // 允许长单词换行到下一行
    word-wrap: break-word;
}

者 | 大澈

大家好，我是大澈！

租的房子快到期了，最近在忙着找房子。

不想白给中介巨额中介费，又想找个环境好价格实惠的，在青岛这地真的不算容易。

所以说找房子，也是个十分需要思考分析的事情。于是我做了如下计划：抓重点、抓刚需、排除不必要的需求、冷静分析、果断入手。

论程序员的租房手段，寄所有正在租房的同道中人！

ONE

需求分析，问题描述

一、需求

一个表格，分表头、表体、表尾三部分。

当每个单元格的内容过长超出时，需要省略，用省略号代替超出的部分。

同时，当鼠标移入上去时，会在上方弹出一个小提示框，其内部可以展示完整的对应内容，当鼠标移出时，隐藏小提示框。

二、问题

1、表头如何实现省略提示效果？

2、表体如何实现省略提示效果？

3、表尾如何实现省略提示效果？

4、如何实现单行省略和多行省略？

TWO

解决问题，答案速览

实现代码如下，复制粘贴即可直接使用。

一、表头实现

表头实现的关键，在于在每一栏中插入表头插槽，并自定义内部的内容。

如果你有时间，具体代码分析、知识总结，可见第三部分。

1<!-- 模版代码 -->
 2<el-table-column prop="principal">
 3 <!-- 表头插槽 -->
 4 <template #header>
 5 <!-- 小提示框 -->
 6 <el-tooltip :disabled="isShowTooltip" content="Principal Repayment" placement="top">
 7 <!-- 单行省略样式、鼠标移入事件 -->
 8 <div class="singe-line" @mouseover="onMouseOver($event.target)">Principal Repayment</div>
 9 </el-tooltip>
10 </template>
11 <!-- 表体插槽 -->
12 <template #default="scope">{{ scope.row.principal }}</template>
13</el-table-column>
14
15// 逻辑代码
16// Tooltip是否禁用标识 默认禁用
17const isShowTooltip=ref(true)
18// 表格鼠标移入事件
19const onMouseOver=(target: any)=> {
20 // 判断是否开启tooltip功能
21 if (target.scrollWidth > target.clientWidth) {
22 isShowTooltip.value=false;
23 } else {
24 isShowTooltip.value=true;
25 }
26}
27
28// 样式代码
29// 单行文本省略
30.singe-line {
31 text-overflow: ellipsis;
32 overflow: hidden;
33 word-break: break-all;
34 white-space: nowrap;
35 }

二、表体实现

表体实现的关键，在于在每一栏中添加show-overflow-tooltip属性，当内容过长被隐藏时显示tooltip小提示框。

如果你有时间，具体代码分析、知识总结，可见第三部分。

1<el-table-column fixed prop="date" label="No" width="60" show-overflow-tooltip>
2</el-table-column>

三、表尾实现

表尾实现的关键，在于通过获取表尾元素，为其追加一个tooltip小提示框子元素，并为其绑定指定列的内容和鼠标移入移出事件。

该实现方式为原生js实现，代码比较冗余。大澈并没有找到最优的答案，网上对此问题的描述也很少，如果看到这有最优解的朋友，感谢留言，已帮助更多其他朋友！

如果你有时间，具体代码分析、知识总结，可见第三部分。

1<!-- 模版代码 -->
 2<el-table :data="tableData" border show-summary :summary-method="getSummaries" style="width: 100%" max-height="500">
 3</el-table>
 4
 5
 6// 逻辑代码
 7// 合计数据
 8let sumsValue=[] as any
 9
 10// 表格合计列逻辑
 11const getSummaries=(param: SummaryMethodProps)=> {
 12 const { columns, data }=param
 13
 14 const sums: string[]=[]
 15 columns.forEach((column, index)=> {
 16 // 第0列
 17 if (index===0) {
 18 sums[index]=t('pdCalculateLoan.Total')
 19 return
 20 }
 21
 22 // 最后一列
 23 if (index===columns.length - 1) {
 24 sums[index]=''
 25 return
 26 }
 27
 28 const values=data.map((item)=> Number(item[column.property]))
 29 if (!values.every((value)=> Number.isNaN(value))) {
 30 sums[index]=values.reduce((prev: any, curr: any)=> {
 31 const value=Number(curr);
 32 if (!isNaN(value)) {
 33 // 合计计算
 34 return prev + curr;
 35 } else {
 36 return prev;
 37 }
 38 }, 0);
 39 } else {
 40 sums[index]=''
 41 }
 42 })
 43
 44 // 存储合计数据
 45 sumsValue=sums
 46
 47 return sums
 48}
 49
 50// 添加表格底部文本提示
 51const handleTableFootTooltip=()=> {
 52 // 加延时器，防止拿不到元素
 53 setTimeout(()=> {
 54 try {
 55 // 获取表格底部元素
 56 let tableCellNodeArr=document.querySelectorAll('.el-table__footer-wrapper .el-table__footer td.el-table__cell')
 57
 58 //创建节点元素节点
 59 let tooltipOne=document.createElement('div');
 60 let tooltipTwo=document.createElement('div');
 61 let tooltipThree=document.createElement('div');
 62
 63 // 元素赋值
 64 tooltipOne.innerHTML=`${sumsValue[1]}`
 65 tooltipOne.className='tooltip'
 66 tooltipTwo.innerHTML=`${sumsValue[2]}`
 67 tooltipTwo.className='tooltip'
 68 tooltipThree.innerHTML=`${sumsValue[3]}`
 69 tooltipThree.className='tooltip'
 70
 71 tableCellNodeArr[1].onmouseover=()=> {
 72 tooltipOne.style.display='block'
 73 }
 74 tableCellNodeArr[1].onmouseout=()=> {
 75 tooltipOne.style.display='none'
 76 }
 77 tableCellNodeArr[2].onmouseover=()=> {
 78 tooltipTwo.style.display='block'
 79 }
 80 tableCellNodeArr[2].onmouseout=()=> {
 81 tooltipTwo.style.display='none'
 82 }
 83 tableCellNodeArr[3].onmouseover=()=> {
 84 tooltipThree.style.display='block'
 85 }
 86 tableCellNodeArr[3].onmouseout=()=> {
 87 tooltipThree.style.display='none'
 88 }
 89
 90 // 追加子元素
 91 tableCellNodeArr[1].append(tooltipOne)
 92 tableCellNodeArr[2].append(tooltipTwo)
 93 tableCellNodeArr[3].append(tooltipThree)
 94 } catch (error) {
 95 // 捕获错误
 96 console.log(error);
 97 }
 98 }, 500)
 99}
100
101onMounted(()=> {
102 handleTableFootTooltip()
103})
104
105
106// 样式代码
107:deep .el-table__footer-wrapper {
108 overflow: visible;
109
110 // 表格底部
111 .el-table__footer {
112 td.el-table__cell {
113 position: relative;
114
115 // 单行文本超出省略
116 div {
117 text-overflow: ellipsis;
118 overflow: hidden;
119 word-break: break-all;
120 white-space: nowrap;
121 }
122
123 // 画提示框
124 .tooltip {
125 display: none;
126 width: 100%;
127 padding: 6px 0;
128 border-radius: 5px;
129 background-color: #313133;
130 text-align: center;
131 color: #fff;
132 position: absolute;
133 top: -40px;
134 left: 0;
135 overflow: visible;
136 font-size: 12px;
137 font-family: Poppins-Regular;
138
139 // 画小三角
140 &::before {
141 content: "";
142 display: block;
143 position: absolute;
144 left: 45%;
145 bottom: -16px;
146 border-width: 10px;
147 border-style: solid dashed dashed dashed; 
148 border-color: #313133 transparent transparent transparent; 
149 }
150 }
151 }
152 }
153 }

THREE

问题解析，知识总结

一、表头如何实现省略提示效果？

表头实现使用了Table-column的header插槽，在其内部放入Tooltip文字提示框组件，Tooltip组件的内容为需要展示的完整内容，而在Tooltip组件内部的元素，则是需要超出省略的内容。

为超出省略的内容元素添加鼠标移入事件，当目标元素的可滚动宽度，即实际宽度+隐藏宽度，大于目标元素的实际宽度时，说明内容元素已超出省略，此时Tooltip组件启用，反之Tooltip组件禁用隐藏。

Table-column的插槽说明如下：

二、表体如何实现省略提示效果？

表体实现的关键，在于在每一栏中添加show-overflow-tooltip属性，当内容过长被隐藏时显示tooltip小提示框。

show-overflow-tooltip属性加在Table上，影响的将是全部列，加在Table-column上时，影响的将是指定列，这里可以根据具体业务需求添加。

show-overflow-tooltip属性说明如下：

三、表尾如何实现省略提示效果？

表尾实现的关键，在于通过获取表尾元素，为其追加一个tooltip小提示框子元素，并为其绑定指定列的内容和鼠标移入移出事件。

在表格合计回调里，先把合计数据存到数组变量中，然后通过获取表尾元素，为其追加一个tooltip小提示框子元素，再依次将数组变量中的合计数据对应下标取出为其赋值，并通过鼠标事件和样式显示隐藏来控制其展示。

Table几个属性说明如下：

四、如何实现单行省略和多行省略？

1// 单行文本省略
 2 .singe-line {
 3 text-overflow: ellipsis; //文本超出显示省略号
 4 overflow: hidden; //文本超出隐藏
 5 white-space: nowrap; //只保留一个空白，文本不会换行
 6 }
 7
 8 // 两行文本省略
 9 .two-line {
10 display: -webkit-box; //将盒子转换为弹性盒子
11 -webkit-box-orient: vertical; //文本显示方式，默认水平
12 -webkit-line-clamp: 2; //设置显示多少行
13 text-overflow: ellipsis; //文本超出显示省略号
14 overflow: hidden; //文本超出隐藏
15 }

- END -

、HTML5设计哲学，它并不是规范优先的设计，它是“妥协式”的规范。

2、HTML5对元素大小写不再严格区分，开发者可以随意使用大小写字符来定义HTML元素。

3、对于一份基本的HTML5文档而言，它总有如下结构：

<!DOCTYPE html>

<html>

<head>

<title>页面标题</title>

<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312”/>

<!—此处还可插入其他meta、样式单等信息à

</head>

<body>

页面内容部分

</body>

</html>

4、不要在<html>和<head>之前插入任何内容！不要在</head>和<body>之间插入任何内容！不要在</body>和</html>之前插入任何内容。

5、HTML5保留的基本元素有如下几个：

<!--…-->:定义HTML注释，里面的内容会被当成注释处理。

<html>:它是HTML5文档的根元素。但HTML5允许完全省略这个元素。

<head>:它用于定义HTML5文档的页面头部分。但HTML5允许完全省略这个元素。

<title>:用于定义HTML5文档的页面标题。

<body>:用于定义HTML5文档的页面主体部分，该标签可以指定id、class、style等核心属性，还可以指定onload、onunload、onclick、ondblclick、onmousedown、onmouseup、onmouseover、onmousemove、onmouseout、onkeypress、onkeydown、onkeyup等事件属性，这些属性用于指定JavaScript脚本。

6、几乎所有的HTML元素都可指定id、style和class属性。其中ID属性用于为HTML元素指定一个唯一标识，该标识是通过DOM访问HTML元素的重要途径。Class 和style属性是CSS样式相关属性。

7、<span>and <div>这两个标签很相像，只是前者默认是不会自动换行。使用的属性值基本一样。

8、<span/>、<div/>和<p/>三个元素都可以作为其他内容的“容器”，在默认情况下，<span/>不会导致换行，<div/>会导致换行，<p/>会产生出段落，段落之间会有更大的间距。更要注意的是<span/>和<p/>只能包含文本、图像、超链接、文本格式化元素和表单控件等内容，<p/>可以<span/>，但<span/>不能包含<p/>;<div/>元素除了可以包含上面的这些内容外，还可以包含更多的元素。

9、<b>定义粗体，<i>定义斜体,<em>定义强调文本,<strong>定义粗体文本，在HTML5中，使用<strong.../>包起来的文本代表首重要的文本。<small>定义小号字体文本，在HMTL5中专门用于标识所谓的“小字印刷体”，通常用来标注诸如免责声明、注意事项、法律规定和版权相关的声明性文字。

10、<sup>定义上标文本，<sub>定义下标文本;<bdo>定义文本显示的方向，该标签也可以指定dir属性，该属性值只能是ltr或者rtl。

11、在HTML5中，空元素标签不允许将开始标签和结束标签分开定义。空标签有如下：area base br col command embed hr img input keygen link mata param source wbr。如果这些标签开始和结束标签分开写是错误的。

12、可以省略结束标签的元素：colgroup dt dd li optgroup option p rt rp thead tbody tfoot tr td th <p>

13、可以省略全部标签的元素： html head body tbody。