2

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

 123456789

进入

 1234...

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

 123456789

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

有任何想法吗？

4

5 回答 5

1

有几个插件可以做到这一点，而且非常简单，您也可以创建自己的插件。

但是，从别人那里拿来工作，这里有一对：

于 2012-07-03T06:39:09.790 回答
1

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

于 2012-07-03T06:46:31.203 回答
1

这是一种非破坏性的、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中的示例

于 2013-04-01T20:34:32.710 回答
0

您可以使用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);
});
于 2012-07-03T06:43:25.857 回答
0

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

于 2012-07-03T06:48:34.757 回答