&..._vue判断文本是否溢出">
赞
踩
scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大。
clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变。
offsetWidth:对象整体的实际宽度,包滚动条等边线,会随对象显示大小的变化而改变。
-
- <el-tooltip :content="item.name" placement="bottom" effect="light" :disabled="!isShowTooltip">
- <span class="member-label member-span text-hidden" v-if="edited"
- @mouseenter="visibilityChange($event)">{{ item.name }}</span>
- </el-tooltip>
- export default{
- data(){
- return{
- isShowTooltip:false,
- }
- },
-
- methods: {
- visibilityChange(event) {
- const ev = event.target;
- const ev_weight = ev.scrollWidth; // 文本的实际宽度 scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大。
- const content_weight = ev.clientWidth;// 文本的可视宽度 clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变。
- // const content_weight = this.$refs.tlp.$el.parentNode.clientWidth; // 文本容器宽度(父节点)
- if (ev_weight > content_weight) {
- // 实际宽度 > 可视宽度 文字溢出
- this.isShowTooltip = true;
- } else {
- // 否则为不溢出
- this.isShowTooltip = false;
- }
- },
- }
- }
- .text-hidden{
- overflow: hidden;
- white-space: nowrap;
- text-overflow:ellipsis;
- }
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。