组件

<template>
  <div ref="tooltipParentRef" class="moreTipText">
    <el-tooltip
      :placement="props.placement"
      effect="dark"
      :enterable="true"
      :show-after="200"
      :offset="10"
      :popper-class="props.textTooltipPopperClass"
      :content="props.content"
      :disabled="disabledTooltip"
    >
      <span
        v-if="!isOpen"
        :class="[
          'tooltip_text',
          textClassName,
          !disabledTooltip ? 'tooltip_ellipsis_text' : '',
          !disabledTooltip ? textEllipsisClassName : ''
        ]"
        :style="{ color: color }"
        style="width: 100%"
        >{{ props.content }}
        <span v-if="props.fistLevel && props.fistLevel.length >= 0" class="fistLevel"
          >({{ props.fistLevel }})</span
        >
        <!-- <span
          v-if="props.fistLevel && props.fistLevel.length >= 0 && !disabledTooltip"
          class="fistLevelpos fistLevel"
          >({{ props.fistLevel }})</span
        > -->
      </span>

      <span
        v-else
        :class="[
          'tooltip_text',
          textClassName,
          !disabledTooltip ? 'tooltip_ellipsis_text' : '',
          !disabledTooltip ? textEllipsisClassName : ''
        ]"
        :style="{ color: color }"
        style="cursor: pointer"
        @click="openLink"
      >
        {{ props.content }}
      </span>
    </el-tooltip>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from "vue"
const props = defineProps({
  content: {
    type: String,
    default: ""
  },
  width: {
    type: String,
    default: ""
  },
  line: {
    type: Number,
    default: 1
  },
  textClassName: {
    type: String,
    default: ""
  },
  textEllipsisClassName: {
    type: String,
    default: ""
  },
  textTooltipPopperClass: {
    type: String,
    default: "default_text-tooltip_popper"
  },
  color: {
    type: String,
    default: ""
  },
  isOpen: {
    type: Boolean,
    default: false
  },
  url: {
    type: String,
    default: ""
  },
  fistLevel: {
    type: String,
    default: ""
  },
  placement: {
    type: String,
    default: "top"
  }
})
const disabledTooltip = ref(true)
const tooltipParentRef = ref()
// 判断当前行文本是否移除
const isEllipsisActive = () => {
  // getClientRects详细介绍以及案例：https://blog.csdn.net/HeMister/article/details/137640173
  const DOMRectList = tooltipParentRef.value
    ? tooltipParentRef.value.children[0].getClientRects()
    : []
  // DOMRectList.length > = props.line 说明超出显示的行数
  if (DOMRectList.length == 1) {
    return DOMRectList[0].width <= tooltipParentRef.value.clientWidth
  } else {
    return DOMRectList.length <= props.line
  }
}
watch(
  () => props.content,
  () => {
    updateStatus()
  },
  {
    immediate: true
  }
)
function updateStatus() {
  setTimeout(() => {
    disabledTooltip.value = isEllipsisActive()
  })
}

const openLink = () => {
  window.open(props.url, "_blank")
}

defineExpose({
  updateStatus
})
</script>
<style lang="scss" scoped>
.tooltip_text {
  word-break: break-all;
}
.tooltip_ellipsis_text {
  &::before {
    content: "";
    display: block;
  }
}
.isacitve {
  position: relative !important;
  padding-right: 15px;
}
.fistLevel {
  font-family: PingFangSC-Medium;
  font-weight: 500;
  font-size: 14px;
  color: #303133;
}
.fistLevelpos {
  position: absolute;
  right: -1px;
  top: 0px;
}
.moreTipText {
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>

使用

# 一行

<div class="info-item_box-item" style="margin-bottom: 20px">
                <img :src="detailData.logo" alt="" class="logo" v-if="detailData.logo" />
                <svg-icon icon-class="default_firm" size="46px" style="margin-right: 16px" v-else />
                <div style="width: calc(100% - 118px); display: flex; align-items: center">
                  <newTooltipText
                    :content="detailData[item.code]"
                    :line="1"
                    textTooltipPopperClass="table_tooltip2"
                    v-slot="slotProps"
                  >
                    <span
                      class="line_ellipsis_1 info-item_value firm_title"
                      @mouseover.self="slotProps.mouseoverSelf"
                      >{{ detailData[item.code] }}</span
                    >
                  </newTooltipText>
                </div>



.line_ellipsis_1 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.table_tooltip2 {
  max-width: 400px;
  white-space: pre-wrap;
}

1、父元素设置宽度

2、 :line="1"

3、单行省略号

.line_ellipsis_1 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

# 多行

 <div style="width: calc(100% - 118px)">
                    <newTooltipText
                      :content="detailData[item.code]"
                      :line="2"
                      textTooltipPopperClass="table_tooltip2"
                      v-slot="slotProps"
                    >
                      <span
                        class="line_ellipsis_2 info-item_value"
                        @mouseover.self="slotProps.mouseoverSelf"
                        >{{ detailData[item.code] }}</span
                      >
                    </newTooltipText>
                  </div>


.line_ellipsis_2 {
  line-height: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.table_tooltip2 {
  max-width: 400px;
  white-space: pre-wrap;
}

1、父元素设置宽度

2、 :line="2"

3、单行省略号

.line_ellipsis_2 {

line-height: 24px;

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box; //单行没有

-webkit-line-clamp: 2;; //单行没有

-webkit-box-orient: vertical;; //单行没有

}

# 原理

一行看的是宽度：文字超过宽度，就会出省略号 

多行 看的是高度： 设置的2行，如果文字超过3行，他会发现超出高度，就会出省略号