How to restrict the number of lines to show using jquery or css?

Question

i have created simple Custom webpart. It looks like

in that web part, Description display multiple line . i have used html P tag to display Description value

<p>​Loream Ipsum​Loream Ipsum​Loream Ipsum​Loream Ipsum ​Loream Ipsum​Loream Ipsum​Loream Ipsum​Loream Ipsum​​​​</p>

currently i m trying to hide lines more than two using jquery in all resolution. is that possible ? please suggest something ?

Answer 1

<p>
​Loream Ipsum​Loream Ipsum
​<p id="link">
    Loream Ipsum​Loream Ipsum
</p> 
​Loream Ipsum​Loream Ipsum​Loream Ipsum​Loream Ipsum​​​​</p>

associate 'id' to the 'p' tag and hide the line whichever you want using jquery.

 $("#link").hide()

Answer 2

There is a JQuery plugin http://keith-wood.name/more.html you could use. It allows you to truncate text at a given length.

$(selector).more({length: 60});

There are lots of settings that this plugin has.

  $(selector).more({     
              length: 100, // Truncation length     
              leeway: 5, // Overrun allowed without truncation     
              wordBreak: false, // True to break between words, false to break anywhere     
              ignoreTags: ['br', 'hr', 'img'], // Non-terminated tags to ignore     
              toggle: true, // True to toggle, false to display and exit     
              ellipsisText: '...', // Display text for ellipsis     
              moreText: 'Show more', // Display text for more link     
              lessText: 'Show less', // Display text for less link     
              andNext: '', // Selector for any following tags to include in the collapse     
              onChange: null // Callback function when expanded/collapsed 
});