Question

是否有任何jQuery插件可以总结我的文字，例如：

123456789

到

 1234...

然而，当我点击这三个点时，它会展开它并显示：

123456789

没有插件css和jquery是受欢迎的。

有什么想法吗？

Answer 1

有几个插件可供使用，而且很容易创建自己的插件。

但是，从其他人那里获取工作，这里有几个：

Answer 2

仅CSS解决方案：

.truncate {
    width: 250px; /* TODO: set as needed */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.truncate:hover {
    white-space: normal;
    overflow: visible;
    text-overflow: inherit;
}

您也可以通过以下方式进行操作：

$(".truncate").click(function () { $(this).addClass("noTruncate"); }

然后将.truncate:hover更改为.noTruncate。

Answer 3

这是一种非破坏性的，jQuery绑定和CSS执行的技术。

考虑这个SCSS / LESS：

.collapsable {
  margin-bottom: 10px; /* your <p> margin-bottom */
  line-height: 20px; /* your <p> line-height */

  p {
    line-height: inherit;
    margin-bottom: inherit;

    &:last-child {
      margin-bottom: 0;    
    }
  }

  &.collapsed {
    position: relative;
    overflow: hidden;

    p {
      margin: 0;
    }

    .expand-link-container {
      position: absolute;
      bottom: 0; right: 0;
      display: block;

      line-height: inherit;
      padding: 0 2px 0 5px;

      background-color: #FFF;

      box-shadow: -5px 0 5px 0 white;
    }
  }

  .expand-link-container {
    display: none;
  }
}

这个jQuery：

function collapseHTML(shownLines, expanderLink){

  // Configuration
  var shownLines   = typeof(shownLines) === "undefined" ? 4 : shownLines,
      expanderLink = typeof(expanderLink) === "undefined" ? "[...]" : expanderLink;

  $('.collapsable').each(function(){

    // If current collapsable has already been collapsed once, skip
    if( $(this).find('.expand-link-container').length > 0 ) return false; 

    // Compute max-height from line-height and shownLines
    var lineHeight = $(this).find('p').first().css('line-height');
        maxHeight  = parseInt(lineHeight, 10) * shownLines;

    // If the current div needs collapsing
    if( $(this).height() > maxHeight) {

      $(this)
        // Collapse it
        .addClass('collapsed')
        .css('max-height', maxHeight)

        // Append expander link
        .find('p:first-child').append(
          '<div class="expand-link-container">' +
          '  <a href="#">' + expanderLink + '</a>' +
          '</div>')

        // Bind click to expander link
        .find('.expand-link-container a').click(function(e){
          e.preventDefault();
          $(this).closest('.collapsable')
            .removeClass('collapsed')
            .css('max-height', '');
        });

    }

  });

}

在您的javascript中的任何位置调用collapseHTML()都会导致所有div.collapse折叠其HTML内容。

JSfiddle

中的示例

Answer 4

您可以使用substr

更新了小提琴 - http://jsfiddle.net/GC2qC/1/

var ttext = $('span').text(); //Store value

$('span').text($('span').text().substr(0, 4)).append('...'); //Substring

$('body').on('click', 'span', function(){ //Display complete text
    $(this).text(ttext);
});

Answer 5

之前我曾使用过摘要插件（http://plugins.learningjquery.com/summarize/index.html）。但是我不知道它是否适用于您正在使用的jQuery版本。

jQuery三点插件但可扩展

5 个答案: