JQuery многоточие Plugin Но Extandlable

Question

Есть ли JQuery плагин, который будет суммировать мой текст, а именно:

123456789 

в

1234... 

Однако, когда я нажимаю три точки она будет расширять его и показать:

123456789 

Без плагинов css и jquery приветствуется.

Любые идеи?

Answer 1

Для этого есть несколько плагинов, и это настолько просто, что вы, вероятно, можете создать свой собственный.

Но, принимая работу от кого-то другого, вот пара:

• jQuery Expander Plugin
• Jquery Plugin: readmore

Answer 2

Вы можете использовать substr

Обновлено Fiddle - 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/МЕНЬШЕ:

.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