如何判断溢出省略号是否在块 HTML 元素上可见答案

【问题标题】：How to tell if overflow ellipses are visible on a block HTML element如何判断溢出省略号是否在块 HTML 元素上可见
【发布时间】：2021-04-25 00:38:31
【问题描述】：

我有许多块元素 (divs)，文本可能很长。块有 CSS

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

剪切任何超出 div 结尾的文本，并且我希望我的 Javascript 知道给定 div 中的文本是否显示省略号，因此我可以添加一些鼠标悬停文本（title 属性）显示全文。

请注意，我见过this question "Detect if text-overflow:ellipsis is active on input field"，但它是关于input 元素，而不是普通的块元素，现有的解决方案不是我的问题的最佳解决方案。

我对解决方案的想法是将元素的宽度与添加了内联样式overflow: visible 的同一元素的宽度进行比较。如果前者小于后者，则使用椭圆。但我想知道是否有更优雅的解决方案，或者（甚至可能）内置解决方案。

更新哇，我很惊讶。添加内联样式overflow: visible 显示完整元素时，宽度保持不变。所以我提出的解决方案不起作用。

显然宽度仍受父元素约束？这太奇怪了。我应该注意到带有文本的 div 在li 内，ul 上有一个maxWidth。是否有可能制作一个通用功能来满足我的需求？

【问题讨论】：

标签： javascript html css ellipsis

【解决方案1】：

好的，我有一个解决方案。我发现scrollWidth 给出了全宽，包括任何溢出，所以我什至不必摆弄元素的样式。这适用于 jQuery：

addTooltipToLongText = function($el) {
  if (!($el instanceof $)) {
    $el = $($el);
  }
  $el.each( (i, it) => {
    const $it = $(it);
    if ($it.width() < it.scrollWidth) {
      $it.prop('title', $it.text());
    }
  });
}

【讨论】：