element Descriptions 内容超出隐藏 Tooltip展示完整内容

使用 el-descriptions 时，可能会出现内容过长导致换行的情况，如图

这样会导致整体很不美观，所以封装了一个组件来解决此问题

效果图

当内容过长时会隐藏超出部分，鼠标移上去Tooltip展示全部内容，内容未超出的，鼠标移上去不展示Tooltip

组件代码

<template><el-tooltip :content="value" :disabled="tooltipShow" placement="top-start"><span ref="content" @mouseover="isShowTooltip">{{value}}</span></el-tooltip>
</template><script>
export default {name: 'DescriptionsTooltip',props: ['value'],data () {return {tooltipShow: false}},methods: {isShowTooltip () {const bool = this.$refs.content.offsetWidth < this.$refs.content.parentNode.offsetWidththis.tooltipShow = bool}}
}
</script><style scoped></style>

组件使用

<el-descriptions><el-descriptions-item label="内容超出隐藏"><descriptions-tooltip :value="'好长好长好长好长好长好长好长好长好长好长好长好长一段文字'"></descriptions-tooltip></el-descriptions-item><el-descriptions-item label="未超出无tooltip提示"><descriptions-tooltip :value="'不是很长的一段文字'"></descriptions-tooltip></el-descriptions-item>
</el-descriptions>

CSS部分

.el-descriptions__body .el-descriptions__table {white-space: nowrap;
}
.el-descriptions-item__content {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;padding-right: 8px;
}

element Descriptions 内容超出隐藏 Tooltip展示完整内容相关推荐

display:table-cell;内容超出隐藏，table,td内容超出隐藏
display:table-cell;内容超出隐藏,和 table 标签一样需要设置 table-layout: fixed; 超出- white-space: nowrap;text-overfl ...
微信小程序列表实现文字内容超出隐藏并显示全文/收起按钮
微信小程序列表实现文字内容超出隐藏并显示全文/收起按钮针对这个功能,产品的需求如下由于我们项目是教育类产品所以这里这个功能会用在发动态这里,就像微信朋友圈那样,我们叫班级圈. 用户发班级圈时,可以 ...
elementui表格内容超出隐藏显示省略号
elementui表格内容超出显示省略号,el-table控制属性::show-overflow-tooltip='true' <el-table:data="list"st ...
【Word技巧】打印部分内容或者隐藏不打印的内容，如何操作？
在工作中,我们经常需要打印各种Word文档,但有时候,我们只需要打印文档的其中一部分内容,或者有部分内容并不想打印出来,要如何操作呢? 还不了解的小伙伴,可以看看下面的方法哦. 一.设置打印其中一部分 ...
el-table文字超出隐藏；el-table表格文字一行展示，超出隐藏，多余的内容会在 hover时显示；
el-table文字默认情况下若内容过多会折行显示,若需要单行显示可以给el-table-column使用show-overflow-tooltip属性,它接受一个Boolean,为true时多余的内 ...
css 超出隐藏滚动条_css 之内容溢出滚动，隐藏滚动条（解决火狐浏览隐藏不了滚动条问题）...
解决火狐浏览隐藏不了滚动条问题 1.里层容器的width多17px,外层容器溢出隐藏,能兼容各个浏览器 .outContainer { width:350px; height:300px; overf ...
css 设置表格/div内容超出时不显示全部，当内容超出时鼠标悬浮显示内容
css样式: td>div{width:100emoverflow: hidden; text-overflow:ellipsis;white-space: nowrap; } jQuery: ...
Vue实现点击按钮上下滑动隐藏或展示查询条件
如图中的是jquery实现的,那么在vue中如何实现呢? 结合自己的项目进行了整合,具体的额模块代码如下所示: 第一步新建组件js 建个JS文件,随便取个名字,把下面的js复制进去,我这里叫moreS ...
android 布局覆盖超出一部分_内容超出
内容审核 Moderation 内容审核(Content Moderation),基于图像.文本.视频检测技术,可自动进行涉黄.广告.涉政涉暴.涉政敏感人物等内容检测,帮助客户降低业务违规风险公测服 ...
css 文字超出隐藏显示三个点鼠标移入以浮窗形式显示完整内容
文字超出后隐藏,显示三个点 overflow: hidden;text-overflow: ellipsis;white-space: nowrap; 以浮窗的形式展示全部内容 .tableTitle ...

element Descriptions 内容超出隐藏 Tooltip展示完整内容

使用 el-descriptions 时，可能会出现内容过长导致换行的情况，如图

效果图

组件代码

组件使用

CSS部分

element Descriptions 内容超出隐藏 Tooltip展示完整内容相关推荐

最新文章

热门文章