javascript - "Smart"在 HTML 中溢出 : is there any way to put ellipsis "..." with a link at the end to view entire content?

Question

我有一个 <div>大小受限，我想在其中放置多行文本，但如果它会溢出，我想在末尾放置一个“...”，并带有一个链接以在另一页上查看全部内容。

这在 Javascript/CSS 中可行吗？我试着搜索了一下，但不确定要查找什么。

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

---

this answer确实很接近，但在某些情况下，如果它刚开始溢出，则只会显示部分省略号。

---

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

Answer 1

这是一个基本示例，它迭代具有 .smart-overflow 类的元素。如果内容被剪裁，它会添加一个可点击的 a 元素，该元素带有 ellipsis-link 类 only。该链接有一个点击事件监听器，它将显示使用 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;
}

<p class="smart-overflow">No ellipsis.</p>
<p class="smart-overflow">This is a longer string of text which should have ellipsis. This is a longer string of text which should have ellipsis.</p>
<p class="smart-overflow">Another string of text which should have ellipsis. Another string of text which should have ellipsis.</p>

在上面的示例中，text-overflow: ellipsis 需要 white-space: nowrap 才能工作，这意味着它只适用于单行。

如果你想支持多行，你可以在支持的浏览器中做这样的事情。如果这不起作用，请参阅下面的 jQuery 解决方案以获得完整的浏览器支持。

var elements = document.querySelectorAll('.smart-overflow');
Array.prototype.forEach.call(elements, function (el) {
  var link = document.createElement('a');
  link.href = '#'; link.className = 'ellipsis-link';

  link.addEventListener('click', function (e) {
    e.preventDefault();
    el.classList.remove('smart-overflow');
  });
  el.appendChild(link);
});

p {
  width: 200px;
  position: relative;
}
.smart-overflow {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;  
  max-height: 2.2em;
  overflow: hidden;
  position: relative;
}
a.ellipsis-link {
  display: none;
}
.smart-overflow a.ellipsis-link {
  display: block;
  position: absolute;
  right: 0; bottom: 0;
  width: 4.2em;
  height: 1.2em;
  cursor: pointer;
}

<p class="smart-overflow">No ellipsis.</p>
<p class="smart-overflow">This is a longer multi-line string of text which should have ellipsis. This is a longer string of text which should have ellipsis.</p>
<p class="smart-overflow">Another multi-line string of text which should have ellipsis. Another multi-line string of text which should have ellipsis.</p>

使用 this library 提供完整浏览器支持的 jQuery 多行替代方案.

$('.smart-overflow').dotdotdot({
  ellipsis: '',
  wrap: 'word',
  callback: function(isTruncated, content) {
    var self = this;

    if (isTruncated) {
      $(this).append($('<a/>', {
        class: 'ellipsis-link',
        text: '...',
        href: '#',
        click: function(e) {
          e.preventDefault();
          $(this).remove();
          $(self).removeClass('smart-overflow is-truncated').trigger("destroy");
        }
      }));
    }
  }
});

p { width: 200px; }
.smart-overflow { max-height: 2.8em; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.dotdotdot/1.7.4/jquery.dotdotdot.min.js"></script>
<p class="smart-overflow">No ellipsis.</p>
<p class="smart-overflow">This is a longer multi-line string of text which should have ellipsis. This is a longer string of text which should have ellipsis.</p>
<p class="smart-overflow">Another multi-line string of text which should have ellipsis. Another multi-line string of text which should have ellipsis.</p>