开发中经常遇到需要超出文本省略的需求,通常情况下只需要设置css的样式即可实现:
text-overflow: ellipsis;overflow: hidden;white-space: nowrap;
但是往往产品都是喜欢玩花活的,这天小明提出要实现超出换行并hover时通过tip提示的需求。一想这tm有啥难的。三方组件很多啊,比如element的Tooltip,于是开心的加上了组件实现
<el-tooltip class="item" :disabled="!showTip" effect="dark" :content="businessData.designerName +'-'+businessData.designerTel" placement="top-start"><div class="designer-inner" v-if="showDesignerInfo"><div ref="isOverflow" class="designer-inner-info designer-inner-info_width" type="textarea">{{'卡社保卡吧撒空间才能卡啊随-1212123131'}}</div><!-- <div ref="isOverflow" class="designer-inner-info designer-inner-info_width">{{businessData.designerName +'-'+businessData.designerTel}}</div> --></div></el-tooltip>
过一会小明又来了,你这能不能实现不超出时不加tip提示,超出时再加提示啊?我tm一个大逼斗就上去了。但是打归打,需求还是要尽力去实现的。
具体实现方案:
可以通过clientWidth与scrollWidth的比较来判断文本内容是否超出元素
html部分:通过ref获取dom
<el-tooltip class="item" :disabled="!showTip" effect="dark" :content="businessData.designerName +'-'+businessData.designerTel" placement="top-start"><div class="designer-inner" v-if="showDesignerInfo"><div ref="isOverflow" class="designer-inner-info designer-inner-info_width" type="textarea">{{'卡社保卡吧撒空间才能卡啊随-1212123131'}}</div><!-- <div ref="isOverflow" class="designer-inner-info designer-inner-info_width">{{businessData.designerName +'-'+businessData.designerTel}}</div> --></div></el-tooltip>
js部分:在合适的时机进行比较
mounted() {this.showTip = this.$refs.isOverflow.clientWidth<this.$refs.isOverflow.scrollWidth;}},
css部分
.designer-inner-info_width{width: 158px;height: 32px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}``# 多行省略判断其实和单行省略判断基本一致> 样式上修改```javascriptwidth: 200px;text-overflow: ellipsis;overflow: hidden;// white-space: nowrap;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;
只需要判断高度比较即可
this.$refs.pisOverflow.clientHeight,this.$refs.pisOverflow.scrollHeight