jQuery 三点插件但可扩展答案

【问题标题】：jQuery Three Dots Plugin But ExtandlablejQuery 三点插件但可扩展
【发布时间】：2012-07-03 06:25:49
【问题描述】：

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

123456789

进入

 1234...

但是，当我单击这三个点时，它会展开并显示：

123456789

欢迎使用没有插件 css 和 jquery。

有什么想法吗？

【问题讨论】：

标签： javascript jquery summarization

【解决方案1】：

为此有几个插件，而且非常简单，您也可以创建自己的插件。

但是，从其他人那里获得工作，这里有一对：

【讨论】：

当然，你有整行应该显示的内容，只需将read more 更改为...，但我必须让你知道，从用户体验的角度来看，你应该有一个明显的链接说类似于read more 的内容，不要隐藏它。
Expander 插件对我来说似乎不错。但是如何将它绑定到未来的元素？
Expander 不起作用，但 readmore 起作用。但是我必须实现更少的功能。谢谢。

【解决方案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。

【讨论】：

【解决方案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 中的示例

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

你可以使用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);
});

【讨论】：