普通文本el-tootip超出宽度自动显示省略号，悬停显示

在el-table中只要加 show-overflow-tooltip <el-table-column show-overflow-tooltip>就可以实现，那普通文本呢？官方并没有给出，就自己了封装一个

<template><!-- 使用方法 --><div class="text-box"><tooltip-over :content="tipText" refName="tooltipOver"></tooltip-over></div>
</template><script>
import tooltipOver from '@/components/tooltipOver'
export default {data() {return{tipText: '一大段文本'}},components: {tooltipOver}
};
</script><style>
.text-box{height: 100%;/* 宽度100%自适应，也可以设置固定长度 */width: 100%; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}
</style>

import tooltipOver from './components/tooltipOver'

<template><div class="text-tooltip"><el-tooltip class="item" effect="dark" :disabled="isShowTooltip" :content="content" placement="top"><p class="over-flow"  @mouseover="onMouseOver(refName)"><span :ref="refName">{{content}}</span></p></el-tooltip></div>
</template><script>export default {name: 'textTooltip',props: {// 显示的文字内容content: {type: String,default: () => {return ''}},refName: {type: String,default: () => {return ''}}},data() {return {isShowTooltip: true}},methods: {onMouseOver(str) {const parentWidth = this.$refs[str].parentNode.offsetWidth;const contentWidth = this.$refs[str].offsetWidth;// 判断是否开启tooltip功能if (contentWidth>parentWidth) {this.isShowTooltip = false;} else {this.isShowTooltip = true;}}}}
</script><style scoped>
.over-flow {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}
</style>

普通文本el-tootip超出宽度自动显示省略号，悬停显示相关推荐

css 文字超出部分自动加省略号
在移动端,经常会在适配的时候遇到文字超出的问题,最合理的做法就是超出部分自动加省略号. 用到的属性有 text-overflow: ellipsis; /显示省略符号来代表被修剪的文本/ word-b ...
java让内容不超出单元格_html表格中单元格内容超出不换行和超出宽度自动隐藏并显示省略号及鼠标移入显示全部内容/移出隐藏(用title属性)...
参考https://www.cnblogs.com/yy-hh/p/4523939.html 在表格布局中经常会遇到因为表格内容长短的变化导致错位布局混乱的情况,这个时候我们可能会有为了布局稳定把单元 ...
解决html表格中内容超出不强制换行和超出宽度自动隐藏并显示省略号
在表格布局中经常会遇到因为表格内容长短的变化导致布局混乱的情况,这个时候我们可能会有为了布局稳定把单元格宽度写死的情况:但是我们设置了宽度却发现超出了宽度之后会自动变大,用css定义元素的overfl ...
解决表格中内容超出不强制换行和超出宽度自动隐藏并显示省略号
在表格布局中经常会遇到因为表格内容长短的变化导致布局混乱的情况,这个时候我们可能会有为了布局稳定把单元格宽度写死的情况:但是我们设置了宽度却发现超出了宽度之后会自动变大,用css定义元素的overfl ...
安卓 textview 超出限制自动添加省略号
1.单行 <TextView android:id="@id/suma_media_detail_tv_actor" ...
html设置文字超过字数_css限制文字显示字数长度，超出部分自动用省略号显示，防止溢出到第二行...
为了保证页面的整洁美观,在很多的时候,我们常需要隐藏超出长度的文字.这在列表条目,题目,名称等地方常用到. 效果如下: 未限制显示长度,如果超出了会溢出到第二行里.严重影响用户体验和显示效果. 我们在 ...
input文本框输入溢出的时候，鼠标悬停显示全部信息
想要鼠标悬停在文本框上时,显示文本框详情,只要title的值等于文本框的value值就可以了 <input onmouseover="this.title=this.value&quo ...
Jupyter中显示数据data时只显示省略号不显示完整数据
在开头导入pandas后加入以下: 设置行不限制数量 pd.set_option('display.max_rows',None) 设置列不限制数量 pd.set_option('display.ma ...
echart横轴文字显示省略号_Echarts X轴内容过长自动隐藏,鼠标移动上去显示全部名称方法...
最近公司做项目,使用echarts做开发,碰到一些数据的名称很长导致图例展示的效果不是很好,自己写了一个方法,当X轴内容过长时自动隐藏,鼠标移动上去显示全部名称样例: 图二是鼠标移动到名称显示的,怎 ...

普通文本el-tootip超出宽度自动显示省略号，悬停显示

普通文本el-tootip超出宽度自动显示省略号，悬停显示相关推荐

最新文章

热门文章