时间戳

首页 > 解决方案 > 如何判断溢出省略号是否在块 HTML 元素上可见

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

问题描述

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

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

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

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

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

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

显然宽度仍然受到父元素的限制？这太奇怪了。我应该注意，带有文本的 div 位于 an 内，li而. 是否有可能制作一个通用功能来满足我的需求？maxWidthul

标签： javascripthtmlcssellipsis

解决方案

好的，我有一个解决方案。我发现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());
    }
  });
}

推荐阅读