Question

我有一个约10行的段落。我希望在2行后显示更多按钮。

如何使用jQuery获取某些字符的前两行？

是否有像

这样的功能

$('p').get(2lines);

Answer 1

AFAIK在JavaScript中没有这样的东西。

您可以设置p标签的高度，然后将溢出设置为隐藏。当您单击“阅读更多”按钮时，您可以将p标记扩展为原始内容高度。

但问题是你必须事先预测两行文字的高度，然后将p标签显示到那个高度。

Answer 2

试试这个;可能需要定制。

<script language="javascript">

    $.fn.truncate = function(options) {

        var defaults = {
            length: 300,
            minTrail: 20,
            moreText: "more",
            lessText: "less",
            ellipsisText: "..."
        };

        var options = $.extend(defaults, options);

        return this.each(function() {
            obj = $(this);
            alert(options.minTrail);
            var body = obj.html();
            if (body.length > options.length + options.minTrail) {
                var splitLocation = body.indexOf(' ', options.length);
                if (splitLocation != -1) {
                    // truncate tip
                    var splitLocation = body.indexOf(' ', options.length);
                    var str1 = body.substring(0, splitLocation);
                    var str2 = body.substring(splitLocation, body.length - 1);
                    obj.html(str1 + '<span class="truncate_ellipsis">' + options.ellipsisText +
                        '</span>' + '<span  class="truncate_more">' + str2 + '</span>');
                    obj.find('.truncate_more').css("display", "none");
                    // insert more link
                    obj.append(
                        '<div class="clearboth">' +
                        '<a href="#" class="truncate_more_link">' + options.moreText + '</a>' +
                        '</div>'
                    );
                    var moreLink = $('.truncate_more_link', obj);
                    var moreContent = $('.truncate_more', obj);
                    var ellipsis = $('.truncate_ellipsis', obj);
                    moreLink.click(function() {
                        if (moreLink.text() == options.moreText) {
                            moreContent.show('normal');
                            moreLink.text(options.lessText);
                            ellipsis.css("display", "none");
                        } else {
                            moreContent.hide('normal');
                            moreLink.text(options.moreText);
                            ellipsis.css("display", "inline");
                        }
                        return false;
                    });
                }
            }
        });
    };

    $().ready(function() {  
        $('.tip').truncate( {  
            length: 120,  
            minTrail: 10,  
            moreText: 'show more',  
            lessText: 'show less'  
        });  
    }); 
</script>

<div class="tip" style="width:200px;background-color:#ccc;padding:10px;">  
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam fringilla, purus a ultrices blandit, odio ante scelerisque neque, vitae imperdiet odio velit ac nisl. Sed tortor metus, placerat condimentum, feugiat in, feugiat adipiscing, mi. Donec pulvinar sem vitae leo. Vestibulum eget lectus et ligula hendrerit pharetra. Sed porta justo ac nisl. Aliquam nisi erat, pellentesque sed, sagittis eu, fringilla sit amet, dolor. Nam ac mi. Pellentesque pede purus, mattis aliquet, semper nec, cursus a, orci. Duis bibendum nibh ac massa. Integer eu tortor. Aenean convallis quam at nunc. Nunc mollis tincidunt nisi. Suspendisse mauris odio, iaculis ut, feugiat vitae, ultrices in, tortor. Quisque at elit. In hac habitasse platea dictumst.  
</div>

Answer 3

我认为griegs的答案很棒！所以我并不是说通过发布这个来最小化它，但正如凤凰和Funka建议的那样，你可以调整高度并隐藏溢出（但不要使用像素，使用em）。这是一个非常基本的样本..单击该框以展开或收缩它。

<style type="text/css">
.info {
 width: 300px;
 background-color: #222;
 padding: 5px;
}
</style>

<div class="info">  
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ornare cursus elementum. Mauris et sem vitae dui vehicula lobortis a non orci. In tortor lacus, vehicula id placerat nec, pharetra non nunc. Aliquam id ipsum quis orci posuere pellentesque et vel urna. Vestibulum mattis sem ornare neque fermentum vel imperdiet nunc eleifend. Suspendisse potenti. Nam scelerisque sodales porttitor. Vestibulum cursus lobortis magna, id vehicula justo faucibus iaculis. Proin facilisis facilisis mauris. Pellentesque ultrices pharetra diam. Fusce a eleifend quam. Aenean eu odio dolor. Mauris augue leo, fringilla eu sagittis at, fermentum vitae dui. Maecenas scelerisque mi at erat posuere vitae porta metus tempor. Vivamus at ante id velit rutrum aliquet eget sit amet purus. Proin sed vehicula elit. Aenean a viverra nunc. Nulla facilisi. Integer tincidunt aliquam rhoncus. Donec nec sagittis mi. Donec et tortor eu diam placerat tempor auctor ac ipsum. Morbi nec nisl felis. Maecenas imperdiet velit nec metus placerat semper rutrum ante iaculis. Cras viverra volutpat enim, in scelerisque sem lobortis sit amet. Donec ornare ante nisl. 
</div>

<script type="text/javascript">
$(document).ready(function(){
 var rowsshown = 2;
 var rowheight = 1.2; // line height in 'em'
 var ht = (rowsshown * rowheight) - .5; // subtracting the .5 prevents the top of the next line from showing
 $('.info')
  .css({'overflow':'hidden','line-height' : rowheight + 'em','height': ht + 'em' })
  .click(function(){
   if ( $(this).css('height') == 'auto') {
    $(this).css('height', ht + 'em');
   } else {
    $(this).css('height','auto');
   }
  });
})
</script>

如何使用jQuery从<p>获取前2行或200个字符</p>

3 个答案: