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
·
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: "测试测试测试测试测试测试测试测试测试测试测试测试",
}
}
具体实现效果如下:
更多推荐
已为社区贡献1条内容
所有评论(0)