I am using this function to show more or less feature uisng jquery
function showCommentMoreLess(){
var showChar = 20; // How many characters are shown by default
var ellipsestext = "...";
var lesstext = "<i class='fa fa-minus-circle '></i>";
$('.more').each(function() {
var content = $(this).html();
var moretext= "<i class='fa fa-plus-circle comment-show' data-html='true' red-tooltip tooltip data-comment='"+content+"'></i>";
if(content.length > showChar) {
console.log(content);
var c = content.substr(0, showChar);
var h = content.substr(showChar, content.length - showChar);
var html = c + '<span class="moreellipses">' + ellipsestext+ ' </span><span class="morecontent"><span>' + h + '</span> <a href="" class="morelink">' + moretext + '</a></span>';
$(this).html(html);
}
});
Here is the section of Html view page
<html>
<head>
<title>jQuery Read More/Less Toggle Example</title>
</head>
<body>
<span class="more">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</span>
<br><br>
</body>
</html>
View Preview is like this
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labor...
Show more >
Now its controlled by adjusting 'showchar=20' variable inside the function showCommentMoreLess.
I want the preview to be like
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labornisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur...
Show more >
I need to show only first 3 lines of the message. How should I handle to show only first 3 lines of any message inside the div.