How to hide/show more text within a certain length (like youtube)

Question

I want to have a text to only be a certain amount of characters/length and after that length, I want to put a link to reveal the full length of the text.

The link w

Answer 1

Updated @Hussein solution with preview height that will adapt to the paragraph number of lines.

So with this bit of code : - You can choose the number of lines you want to show in preview, it will works for all screen sizes, even if font-size is responsive. - There is no need to add classes or back-end editing to separate preview from whole content.

http://jsfiddle.net/7Vv8u/5816/

var h = $('div')[0].scrollHeight;

divLineHeight = parseInt($('div').css('line-height'));
divPaddingTop = parseInt($('div').css('padding-top'));
lineToShow = 2;
divPreviewHeight = divLineHeight*lineToShow - divPaddingTop;
$('div').css('height', divPreviewHeight );

$('#more').click(function(e) {
  e.stopPropagation();
  $('div').animate({
    'height': h
  })
});

$(document).click(function() {
  $('div').animate({
    'height': divPreviewHeight
  })
})