文字超出长度用省略号代替,鼠标悬停以悬浮框显示（Vue）

html代码：

<div class="info-item">
    <ul>
        <li v-for="(v, index) in notifyInfo" :key="index" class="li-info-item">
            <span class="info-title" :title="v.title">{{ v.title }}</span>
            <span class="info-time">({{ v.time }})</span>
        </li>
    </ul>
</div>

data：

notifyInfo: [
        {
          title: '111111111111111111111111111111111111111111111111111',
          time: '2020-07-24'
        },
        {
          title: '2222222222222222222222222222222222',
          time: '2020-05-07'
        },
        {
          title: '33333333333333333333333333333333333333333333333333333333',
          time: '2020-04-14'
        },
        {
          title: '4444444444444444444444444444444444444444',
          time: '2019-12-24'
        },
        {
          title: '5555555555555555555555555555555555555555555555555',
          time: '2019-12-05'
        }
      ]

css代码：

.info-title {
      width: 80%;   // *必须设置
      display: inline-block;  //取消span格式，从而可以设置span的宽度和高度
      overflow: hidden;     // *必须设置。表示超出宽度的部分隐藏
      text-overflow: ellipsis;  // 	*必须设置。表示显示省略符号来代表被修剪的文本
      white-space: nowrap;   // *必须设置。规定段落中的文本不进行换行
   }

width、overflow、text-overflow、white-overflow在CSS中这四个属性必须设置。

鼠标悬停时显示全部文本只需要给当前span设置title就行了，在Vue中，使用：对title进行绑定，可以动态获取值。