Javascript jQuery三点插件，但可扩展

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

 123456789

进入

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

 123456789

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

---

有什么想法吗？

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

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

---

您可以使用

substr

更新小提琴-

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版本。

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

考虑到此SCS/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;
  }
}

.collapsable{
保证金底部：10px；/*你的保证金底部*/
线高：20px；/*您的线高*/
p{
行高：继承；
页边距底部：继承；
&：最后一个孩子{
页边距底部：0；
}
}
&.崩溃{
位置：相对位置；
溢出：隐藏；
p{
保证金：0；
}
.展开链接容器{
位置：绝对位置；
底部：0；右侧：0；
显示：块；
行高：继承；
填充：0 2px 0 5px；
背景色：#FFF；
长方体阴影：-5px0 5px0白色；
}
}
.展开链接容器{
显示：无；
}
}

这个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', '');
        });

    }

  });

}

函数collapseHTML（shownline，expanderLink）{
//配置
变量shownLines=typeof（shownLines）==“未定义”？4:shownLines，
expanderLink=typeof（expanderLink）==“未定义”？“[…]”：expanderLink；
$（'.collapsable'）。每个（函数（）{
//如果当前可折叠文件已折叠一次，请跳过
if（$（this）.find（'.expand link container'）.length>0）返回false；
//根据线高和显示线计算最大高度
var lineHeight=$（this.find（'p'）.first（）.css（'line-height'）；
maxHeight=parseInt（线宽，10）*显示线；
//如果当前div需要折叠
if（$（this）.height（）>maxHeight）{
$（本）
//折叠它
.addClass（'折叠'）
.css（'max-height'，maxHeight）
//附加扩展器链接
.find（'p:第一个子项'）.append(
'' +
'  ' +
'')
//绑定单击到扩展链接
.find（'.expand link container a'）。单击（函数（e）{
e、 预防默认值（）；
$（this）.closest（“.collapsable”）
.removeClass（'折叠'）
.css（'最大高度'，''）；
});
}
});
}

在javascript中的任意位置调用

collapseHTML（）

将导致所有div.collapse折叠它们的HTML内容

---

在

中的示例当然，你有整行应该显示的内容，只需将

阅读更多

更改为

…

，但我必须让你知道，从用户体验的角度来看，你应该有一个明显的链接，说一些类似于

阅读更多

的内容，不要隐藏它。Expander插件似乎适合我。但是，如何将它绑定到未来的元素？Expander不工作，但readmore工作。但是，我必须实现lessmore功能。谢谢

.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;
  }
}

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', '');
        });

    }

  });

}