Question

我正在使用jRibbble将Dribbble中的Feed引入我的网站。我非常希望将描述截断为2行。这可能吗？

<script type="text/javascript">
$(document).ready(function getDribbbleShots() {   
  $.jribbble.getShotsByPlayerId('abenjamin765', function (playerShots) {
      var html = [];

      $.each(playerShots.shots, function (i, shot) {
          html.push('<div class="col-md-4"><div class="thumbnail"><a href="' + shot.url + '" target="_blank">');
          html.push('<img class="shot-image" src="' + shot.image_url + '" ');
          html.push('alt="' + shot.title + '"></a><div class="caption"><h4>'+ shot.title +'</h4><p>'+shot.description+'</p></div></div></div>');
      });
      $('.dribbble-feed').html(html.join(''));
  }, {page: 1, per_page: 9});
});
</script>

http://abenjamin765.github.io/folio/

Answer 1

您可以通过在css中限制描述的高度，并在css中设置text-overflow行为来隐藏文本超过某个点。

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

请注意，这仅适用于单行说明。如果您想将描述扩展到多行，可以采用几种方法。

请参阅：http://html5hub.com/ellipse-my-text/

或者，如果您不关心是否用省略号指示溢出，则只需设置

即可

.thumbnail .caption p {
  height: 40px;
  overflow: hidden;
}

如何用javascript截断字符串？

1 个答案: