jQuery 三点插件，但可扩展

jQuery Three Dots Plugin But Extandlable

本文关键字：可扩展 插件 三点 jQuery      更新时间：2023-09-26

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

 123456789

到

 1234...

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

 123456789

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

有什么想法吗？

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

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

  • jQuery 扩展器插件
  • Jquery 插件：阅读更多

仅限 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 。

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

考虑到这个 SCSS/更少：

.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 中的示例

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

您可以使用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);
});
相关文章：