文字超出显示点点点之ellipsis 设置

一般情况下一行文字在一定区域显示的话如果不限定高度，那么在内容超过的宽度的话就会换行显示，为了页面的美观，目前的通用做法就是在最后显示…，然后鼠标悬浮显示完整内容，具体设置如下:

height: 40px;\noverflor: hidden;\ntext-overflow: ellipsis;\nwhite-space: nowrap;

主要就是这四个属性，按顺序分别是：1、要有固定高度 2、超出部分隐藏 3、显示… 4、文本不换行

如果是vue项目,如果你的组件库是使用的element-ui，那么可以结合tooltip组件来实现这种效果。不过需要先计算出正常显示效果后再通过设置某个dom的textOverflow的true和false，来控制tooltop的显示与隐藏。

function handleStyle (dataList, dom, limitedHeight, _this) {\n  let ele = document.querySelectorAll(dom)\n  for (let index = 0; index < ele.length; index++) {\n    let element = window.getComputedStyle(ele[index])\n    if (parseInt(element.height) > limitedHeight) {\n      _this.$set(dataList[index], 'textOverflow', true)\n    }\n  }\n}\n\n// 等dom渲染完成后再计算某个dom在大于某个高度后是否需要显示tooltip\nthis.$nextTick(()=>{\n          handleStyle(this.list, ".item", 43, this)\n        })\n