1.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行可调），并将溢出的文字省略显示
多行文本内容英语单词无法实现（如下）：
备注：
-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
tooltip默认是把折叠的内容显示为一行（除非特别特别长），那么当table中的文字非常的多时视觉体验就会较差。我们可以对tooltip进行样式修改（根据宽度自动换行）：
注：
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
5.ant-design内容超出部分显示省略号，鼠标悬停显示
和elemnt-ui类似：
（1）在Table中可以设置 可以让单元格内容根据宽度自动省略：Ant Design Vue
（2）也可以使用tooltip包裹将要省略显示的内容：Ant Design Vue
版权声明：
本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。
本文网址：https://www.mushiming.com/mjsbk/4754.html