"“聪明”;HTML中的溢出:有什么方法可以放省略号“"结尾有一个链接，可以查看整个内容

下面是一个基本示例，它迭代具有.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;
}

<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>

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>

看看这些jQuery插件：

https://github.com/jjenzz/jquery.ellipsishttps://github.com/rviscomi/trunk8

下面是我不久前写的一些代码，它包装了trunk8，使链接中的省略号，并使它们也具有响应性。

(function($, window, document, undefined) {
  'use strict';
  window.seeMore = function() {
    function addSeeMoreLinks() {
      $article.find('p').trunk8(options).each(function() {
        var $this = $(this);
        if (0 === $this.find('.trunk8').length) {
          $this.append(' <a href="#" class="seeMore">see more</a>.');
        }
      });
    }
    function removeSeeMoreLinks() {
      $article.find('p').each(function() {
        $(this).find('.seeMore').remove();
      });
    }
    function setupSeeMoreLinks() {
      addSeeMoreLinks();
      $(window).resize(function() {
        removeSeeMoreLinks();
        addSeeMoreLinks();
      });
    }
    var
      $article = $('.blogArticleList article'),
      options = {
        lines: 6,
        fill: '&hellip; <a href="#" class="trunk8">see more</a>.',
        tooltip: false
      };
    setupSeeMoreLinks();
  };
  if (window.addEventListener && $().trunk8) {
    window.seeMore();
  }
})(jQuery, window, document);