内容溢出处理：隐藏显示省略号，鼠标悬停提示全部内容

1.div中内容显示在一行，并将溢出的文字省略显示，鼠标悬停提示全部内容

 <div 
    title="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" 
    style="width:100px; 
           height:20px; 
           text-overflow:ellipsis; 
           white-space:nowrap; 
           overflow:hidden;"
>
     aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 </div>

备注：

（1）div的文字会以省略的形式显示，并不是单独的截取。单独设定text-overflow:ellipsis;是没有效果的,因为它仅仅是注解，标注溢出时以省略的形式显示。所以必须要有white-space:nowrap，让文字显示子一行，又需要用overflow:hidden来使溢出的内容隐藏（配合使用）。

（2）给div加上title属性，并将所有内容作为title属性的值，鼠标放在div上可以显示所有内容（类似tooltip）

    text-overflow:clip|ellipsis，默认值:clip;适用于:所有元素

• clip:当前对象内文本溢出时不显示省略标记(...),而是将溢出部分裁剪。
• ellipsis:当对象内文本一处时显示省略标记(...)。

2.div中内容显示在3行（或n行可调），并将溢出的文字省略显示

 <div 
    style="width:100px; 
           height:20px; 
           text-overflow:ellipsis; 
           display: -webkit-box;
          /* 限制在一个块元素显示的文本的行数（第几行裁剪） */
           -webkit-line-clamp: 3;
          /* 设置或检索伸缩盒对象的子元素的排列方式 */
           -webkit-box-orient: vertical;
           overflow:hidden;"
>
     啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
 </div>

多行文本内容英语单词无法实现（如下）：

备注：

-webkit-line-clamp 其实是一个不规范属性，使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；-webkit-line-clamp 用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。

• display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
• -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
• text-overflow: ellipsis; ，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。

3.element-ui内容超出部分显示省略号，鼠标悬停显示tooltip

方法一：在Table中可使用官方提供的属性show-overflow-tooltip。 

API:Element - The world's most popular Vue UI framework

使用时哪一行需要显示省略号，就给对应el-table-column设置show-overflow-tooltip属性。

方法二：使用Tooltip文字提示将要省略显示的内容包裹起来，并做省略显示处理。

API:Element - The world's most popular Vue UI framework

<el-tooltip class="item" effect="dark" content="这里写提示文字" placement="top-start">
      <el-button>显示内容</el-button>
</el-tooltip>

 tooltip默认是把折叠的内容显示为一行（除非特别特别长），那么当table中的文字非常的多时视觉体验就会较差。我们可以对tooltip进行样式修改（根据宽度自动换行）：

<style>
.el-tooltip__popper {
  max-width: 60px;
}
</style>

注：

tips的class名为.el-tooltip__popper，写css样式时需要注意，如果在样式里面写scoped会造成原本的.el-tooltip__popper样式无效，但是去掉scoped又有可能影响到其他页面的样式，所以在当前组件再写一个<style></style>样式。

4.element-ui内容超出部分显示省略号，鼠标悬停显示popover弹出框

前面的方法有一个很大的弊端，即鼠标悬停显示的数据无法复制。使用Popover 弹出框组件，不仅在鼠标指向内容时，在悬浮框中将所有内容显示出来，鼠标还可以到悬浮框复制自己想要的内容。

API:Element - The world's most popular Vue UI framework

<!-- <el-table-column label="DeviceId" prop="deviceId" :show-overflow-tooltip='true'></el-table-column> -->
<el-table-column label="deviceId" prop="deviceId">
    <template slot-scope='scope'>
        <el-popover
            placement="top-start"
			width="400"
			trigger="hover">
			<span>{{scope.row.deviceId}}</span>
			<span slot="reference">{{scope.row.deviceId.substr(1,20) + '...'}}</span>
		</el-popover>
	</template>
</el-table-column>

 5.ant-design内容超出部分显示省略号，鼠标悬停显示

和elemnt-ui类似：

（1）在Table中可以设置 column.ellipsis 可以让单元格内容根据宽度自动省略：Ant Design Vue

（2）也可以使用tooltip包裹将要省略显示的内容：Ant Design Vue