CSS文字超出部分用省略号代替，js鼠标悬停时显示全部文本

需求：

宽度为百分比，随浏览器变化而变化，当窗口变小到一定程度，文字超出部分用省略号代替，当文字出现省略号，需要鼠标悬停时显示全部文本。

文字超出部分用省略号代替

    width:
    overflow: hidden;　　　　　　　　
    text-overflow: ellipsis;　　　　
    white-space: nowrap;　　

还有一种用js控制
需要确定文字长度，超出这个长度就隐藏

fontNumber (date) {
  const length = date.length
  if (length > 30) {
    var str = ''
    str = date.substring(0, 30) + '......'
    return str
  } else {
    return date
  }
}　　

鼠标悬停时显示全部文本

1、给当前span设置title就行了，在Vue中，使用：对title进行绑定，可以动态获取值。很丑
2、鼠标移上去时直接释放宽度限制
3、鼠标移上去时释放overflowd的截取，按照原本样式显示，即换行
4、在div中绑定鼠标经过事件
跟title样式一样 ，丑

onload = function(){
        content.onmouseover = function(){
          this.title = this.innerHTML;
        }
      }

这些办法不适合我的需求。
5、自定义弹出层