vue+elementui實現文本超出字數時顯示省略號且鼠標懸停時顯示省略全部信息

1.省略單行

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

　　

2.省略多行

word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;//控制行數
-webkit-box-orient: vertical;

　　

3.鼠標懸停時顯示省略全部信息

　利用title屬性，在代碼中如下：

<div class="moduletitle" :title="titletest">{{ titletest }}</div>
 
data() {
    return {
      titletest: "測試測試測試測試測試測試測試測試測試測試測試測試",
    }
   }

 

　具體實現效果如下：