javascript - 向文本溢出 : ellipsis 的元素添加标题属性

Question

我不确定这是否容易实现，但我想我会问以防万一:

我在文本列表中使用以下 CSS 规则:

{ 
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
}

正如预期的那样，列表之外的任何文本都将被 chop 并在末尾放置一个省略号。

我只想为触发列表上的 text-overflow 规则的那些列表项设置一个事件标题属性。因此，您可以将鼠标悬停在任何被 chop 的文本上，并查看其全文的工具提示。

有些事情告诉我这很难，如果不是不可能的话。但是我很想被证明是错误的。我最好寻找一种使用尽可能少的 JavaScript 的解决方案。

Answer 1

我们使用类似的、更通用的省略号，它适用于大多数情况。我们还应用了 title 属性(对于所有元素)。仅在元素省略时才应用标题，这确实很困难。下面的示例假设，如果元素的宽度与父元素相同，我们应该设置标题。如果没有 if 语句，它将始终应用标题。

document.querySelectorAll('.ellipsify').forEach(function (elem) {
  if (parseFloat(window.getComputedStyle(elem).width) === parseFloat(window.getComputedStyle(elem.parentElement).width)) {
    elem.setAttribute('title', elem.textContent);
  }
});

.ellipsify {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 100%;
    display: inline-block;  
}

div {
  width: 100px;
}

<div>
  <span class="ellipsify">dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</span>
  <span class="ellipsify">dolor sit amet</span>
</div>