文本溢出隐藏显示省略号并鼠标移上显示tooltip提示

文本超出显示省略号

1.  
   .isEllipsis {
2.  
   overflow: hidden;
3.  
   text-overflow: ellipsis;
4.  
   display: -webkit-box;
5.  
   -webkit-box-orient: vertical;
6.  
   -webkit-line-clamp: 1;
7.  
   }

整体代码

1.  
   <template>
2.  
   <div>
3.  
   <div class="title"> 实例 </div>
4.  
   <el-tooltip placement="top" effect="light">
5.  
   <div slot="content" :style="{ 'width': (labelValue.length > 26 ? '400px' : 'auto') }">{{
6.  
   labelValue
7.  
   }}</div>
8.  
   <span class="isEllipsis"> {{ labelValue }}</span>
9.  
   </el-tooltip>
10.  
    </div>
11.  
    </template>
12.  
     
13.  
    <script>
14.  
    export default {
15.  
    data() {
16.  
    return {
17.  
    labelValue: "风空空洞洞地吹过。一年又这么过去。而来年，还要这么过去。我不知道是安稳的背后隐藏着沮丧，还是沮丧里终归有安稳。只是我们，无法找到。28、如果能够控制自己的悲欢离合，那未必是件好事；因为只有在雨后才会见到彩虹，如果冬天来了，春天还会远吗？如果黑暗来临，光明还会远吗？"
18.  
    };
19.  
    },
20.  
    };
21.  
    </script>
22.  
     
23.  
    <style scoped>
24.  
    .title {
25.  
    font-size: 26px;
26.  
    margin: 20px;
27.  
    }
28.  
     
29.  
    .isEllipsis {
30.  
    overflow: hidden;
31.  
    text-overflow: ellipsis;
32.  
    display: -webkit-box;
33.  
    -webkit-box-orient: vertical;
34.  
    -webkit-line-clamp: 1;
35.  
    }
36.  
    </style>

 实现效果

这篇好文章是转载于：学新通技术网