您的位置:首页 > Web前端 > CSS

css overflow 省略号点点点与 鼠标悬浮显示可以绑定事件:title 也可以在table状态下用 element-ui里面的方法替代

2019-06-12 19:19 3239 查看

原来是用css和jsappend内容写的代码
现在可以用:
用的是:title方法 :title=“item.enterpriseBaseInfo.name||‘暂无’” title里面的内容是标签内动态加载的内容

<el-col :span="10" :title="item.enterpriseBaseInfo.name||'暂无'" >{{item.enterpriseBaseInfo.name||'暂无'}}</el-col>

在 css中写的是:

.el-col-8,.el-col-7,.el-col-6,.el-col-10{
overflow: hidden;
text-overflow: ellipsis;
//  display: -webkit-box;
display:block;
-webkit-line-clamp: 1;
white-space:nowrap;
-webkit-box-orient: vertical;
}

在table状态下其实可以用element里面封装好的方法: show-overflow-tooltip

<el-table-column prop="content" label="短信内容" :width="400"  show-overflow-tooltip>
<template slot="header">
<span class="table-header">短信内容</span>
</template>
</el-table-column>

会自动检测是否超出 并且超出后t鼠标悬停会自动出现完整的内容,如以下:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐