JS如何判断文字被ellipsis了？

如果想要文本超出宽度后用省略号省略，只需要加上以下的 css 就行了。

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

3 行 css 搞定，但是问题来了：

如果我们想要当文本被省略的时候，也就是当文本超出指定的宽度后，鼠标悬浮在文本上面才展示popper，应该怎么实现呢？

CSS帮我们搞定了省略，但是 JS 并不知道文本什么时候被省略了，所以我们得通过JS来计算。

创建一个block元素来包裹inline元素

这种方法从acro design vue中学到的，应该是最简单的办法。要点就是外层一定是block元素，内层是inline元素

<div class="ellipsis box">
  <span class="content">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing
    elit.
  </span>
</div>


<style>
  .ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }


  .box {
    border: 1px solid gray;
    padding: 10px;
  }
</style>

通过上面对css和html做的处理，我们可以实现让box元素里面的文字进行ellipisis，同时由于并没有 对span.content进行任何overflow的处理，所以该 span 的offsetWidth还是保持不变。

const checkEllipsis = () => {
  const { pLeft, pRight } = getPadding(box)
  const horizontalPadding = pLeft + pRight
  if (box.clientWidth <= content.offsetWidth+horizontalPadding ) {
    result.textContent = '存在省略号'
  } else {
    result.textContent = '容器宽度足够，没有省略号了'
  }
}

同样，只要满足外层元素是block，内层元素是inline的话，里面的dom元素其实是随便放的

<div class="ellipsis box">
  <span class="content">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing
    elit.
    <span style="font-size: large;">
      hello world
    </span>
    <span style="letter-spacing: 20px;">
      hello world
    </span>
  </span>
</div>

作者：嘉琪coder
链接：https://juejin.cn/post/7262280335978741797