2

私のテキストを要約するjQueryプラグインはありますか？

 123456789

の中へ

 1234...

ただし、その3つのドットをクリックすると、展開されて次のように表示されます。

 123456789

プラグインなしでcssとjqueryは大歓迎です。

何か案は？

4

5 に答える 5

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 に答える
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 に答える
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 に答える