How to get first 2 lines or 200 characters from <p> using jQuery

Question

I have a paragraph with about 10 lines . I want to display the read more button after 2 lines.

How can I get the first two lines of some characters using jQuery?

Is there any function like

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

Answer 1

AFAIK there is nothing like this in JavaScript.

You can set the height of the p tag and then set the overflow to hidden. And when you click the read more button you can expand the p tag to the original content height.

But the problem with this is that you have to predict the height of two lines of text in advance and then display the p tag to that height.

Answer 2

Try this; Customisation may be required.

<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

I think griegs answer is great! So I don't mean to minimize it by posting this, but as phoenix and Funka suggested, you can adjust the height and hide the overflow (but don't use pixels, use em). This is a very basic sample.. click on the box to expand or contract it.

<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>