HTML中的"智能"溢出:有没有办法将省略号"..."与末尾的链接放在一起以查看整个内容？

这在Javascript/CSS中可行吗？我尝试了一下,但我不确定该寻找什么.

嗯 - 看起来有一个CSS text-overflow: ellipsis;但我不认为我可以在省略号上放置一个链接.

这个答案非常接近,但有些情况下,如果它刚刚开始溢出,那么只有部分省略号出现.

库要求:我可以使用jQuery(有点不情愿),更喜欢无框架依赖的跨浏览器解决方案.

这是一个用类的迭代元素的基本示例.smart-overflow.只有在剪切内容时a,它ellipsis-link 才会添加一个可单击的元素.该链接有一个点击事件监听器,可以显示隐藏的隐藏内容overflow: hidden.此示例仅适用于单行.请参阅下面的替代示例,了解适用于支持的浏览器中的多行的方法.

var elements = document.querySelectorAll('.smart-overflow');
Array.prototype.forEach.call(elements, function (el) {
  var link = document.createElement('a');
  link.href = '#'; link.className = 'ellipsis-link';
  
  if (el.offsetWidth < el.scrollWidth) {
    link.addEventListener('click', function (e) {
      e.preventDefault();
      el.classList.remove('smart-overflow');
    });
    el.appendChild(link);
  }
});

p {
  width: 200px;
  position: relative;
}
.smart-overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
a.ellipsis-link {
  display: none;
}
.smart-overflow a.ellipsis-link {
  display: block;
  position: absolute;
  right: 0; bottom: 0;
  width: 1.2em;
  height: 100%;
  cursor: pointer;
}

No ellipsis.
This is a longer string of text which should have ellipsis. This is a longer string of text which should have ellipsis.
Another string of text which should have ellipsis. Another string of text which should have ellipsis.