jQuery的三個點插件，但Extandlable

Question

是否有任何jQuery插件，將總結我的文字即：

123456789 

到

1234... 

然而，當我點擊三個點，將其展開，並顯示：

123456789 

沒有插件的CSS和jQuery是值得歡迎的。

任何想法？

Answer 1

這裏有幾個插件，它很容易，你也可以創建自己的插件。

但是，考慮從別人的工作，這裏是一對夫婦：

• jQuery Expander Plugin
• Jquery Plugin: readmore

Answer 2

您可以使用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 3

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 4

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

Answer 5

這是一個非破壞性的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', ''); 
     }); 

    } 

    }); 

} 

調用collapseHTML()在JavaScript中的任何地方將導致所有div.collapse崩潰的HTML內容。

在JSfiddle