Beyond text prompt

El-tooltip is packaged based on Element UI and can be copied directly

code

<template> <div class="ellipsis-tip"> <div ref="outer" :class="outerClass" :style="styleObject"> <el-tooltip class="item" effect="dark" :disabled="isElTooltipShow" :content="contentText" :placement="placement"> <span @mouseenter="hanldeElTooltip"> {{ contentText }} </span> </el-tooltip> </div> </div> </template> <script> export default {name: 'ellipsisTip', props: {placement: {// Tooltip type: String, default: 'top',}, line: Type: Number, default: 1,}, outerShellWidth: {// Tooltip outerShellWidth type: String, default: '100%',}, contentText: {// Text content Type: String, default: ",},}, computed: Return this.outerShellWidth}, outerClass () {return this.line === 1? "contentCls-one" : "contentCls-more" }, styleObject () { const obj = { width: this.width } if (this.line > 1) { obj['-webkit-line-clamp'] = this.line } return obj } }, Data () {return {isElTooltipShow: true}, methods: {hanldeElTooltip (val) {if (this.target.offsetheight > this.$refs.outer. ClientHeight) { This.iseltooltipshow = false}} else {if (val.target.offsetwidth > this.$refs.outer. ClientWidth) {// This. isElTooltipShow = false}}},},} </script> <style scoped lang="less">. Ellipsis -tip {width: 100%; .contentcls-more {// Outer shell has made multiple lines of text overflow show ellipsis handle overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; }.contentcls-one {// The outer shell has made a single line of text overflow display ellipsis processing display: inline-block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all; } } </style>Copy the code

use

<ellipsis :contentText="description" :line="2"></ellipsis >Copy the code