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

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

height: 40px;
overflor: hidden;
text-overflow: ellipsis;
white-space: nowrap;

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

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

function handleStyle (dataList, dom, limitedHeight, _this) {
  let ele = document.querySelectorAll(dom)
  for (let index = 0; index < ele.length; index++) {
    let element = window.getComputedStyle(ele[index])
    if (parseInt(element.height) > limitedHeight) {
      _this.$set(dataList[index], 'textOverflow', true)
    }
  }
}

// 等dom渲染完成后再计算某个dom在大于某个高度后是否需要显示tooltip
this.$nextTick(()=>{
          handleStyle(this.list, ".item", 43, this)
        })

本文章由javascript技术分享原创和收集