autoEllipsis

codesandbox体验地址

背景

有一个需求产品希望根据是否文字溢出（是否出现省略号）展示tooltip, 一开始觉得文字溢出是css的行为，js拿不到，只能写死固定字数,后面想想还是太糙了

思路

监听 offsetWidth 和 scrollWidth, 具体的相关width扫盲帖

<template>
  <div ref="tooltipWrapper" class="tooltip-wrapper-ell">
    <template v-if="!showTooltip">
      {{ text }}
    </template>
    <a-tooltip v-else placement="top">
      <template #title>{{ text }}</template>
      <span class="tooltip-wrapper-ell">{{ text }}</span>
    </a-tooltip>
  </div>
</template>

<script>
import { defineComponent, ref, watch, nextTick } from 'vue'

export default defineComponent({
  name: 'TooltipText',
  props: {
    text: {
      type: String,
      default: '',
    },
  },
  setup(props) {
    const tooltipWrapper = ref()
    const showTooltip = ref(false)
    watch(
      () => props.text,
      async () => {
        await nextTick()
        const el = tooltipWrapper.value
        showTooltip.value = el.offsetWidth < el.scrollWidth
      },
      {
        immediate: true,
      }
    )
    return {
      tooltipWrapper,
      showTooltip,
    }
  },
})
</script>

<style lang="less">
.tooltip-wrapper-ell {
  display: inline-block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
}
.ant-tooltip-inner {
  word-break: break-all;
}
</style>

附一篇掘金文章的思路，纯css

父元素height: 1.5em, 只能显示一行，超出隐藏， title元素使用max-height: 3em，正常line-height: 1.5em, 3em就是2行, text一行能完全显示时，title在顶上，text超出一行时（又因为max-height: 3em的原因，只能是2行），此时title刚好覆盖了上去 大体伪代码如下，

<div class="wrap">
    <span class="text">CSS 实现优惠券的技巧 - 2021-03-26</span>
    <span class="title" title="CSS 实现优惠券的技巧 - 2021-03-26">CSS 实现优惠券的技巧 - 2021-03-26</span>
</li>

.wrap {
  line-height: 1.5;
  height: 1.5em;
  overflow: hidden;
  .text{
    display: block;
    max-height: 3em;
  }
  .title{
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    position: relative;
    top: -3em;
  }
}