2

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+ '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<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.

user21488
  • 69
  • 7
  • Hmm that may be hard to do, unless you have a fixed `width` for your div. Otherwise, the number of characters in a line will change based on the screen size. Another options is to limit the `height` of your div to the size of 3 lines, since your `font-size` is probably not changing. – Bruno Monteiro Jul 29 '20 at 04:23
  • @BrunoMonteiro other than fixing height inside css. any other option to fix it with jquery ? – user21488 Jul 29 '20 at 04:25
  • Is there a requirement to make it with jquery? Just asking because even the ellipses (...) you could include with CSS, and it will be more "responsive" to different screen sizes. If you need to use jQuery though, you can always control the `div` height with javascript. – Bruno Monteiro Jul 29 '20 at 04:29
  • Maybe this will help: https://stackoverflow.com/questions/3922739/limit-text-length-to-n-lines-using-css or https://css-tricks.com/max-lines/ – Bruno Monteiro Jul 29 '20 at 04:33
  • @BrunoMonteiro anything using string manipulation inside jquery ? – user21488 Jul 29 '20 at 04:33
  • To use string manipulation inside jquery you would need to do some math. Calculate the width size of your div and the size of your character (font-size). With that, you would know how many characters you can fit in each line, and then manipulate the string. Some font's may have different size for each character, so I think this is not a good method...but the only one I can think of. – Bruno Monteiro Jul 29 '20 at 04:35
  • Can you give an approximation of how many characters is in 2.5 to 2.8 lines? Would displaying this number of characters be OK? – Bryn Lewis Jul 31 '20 at 09:38

0 Answers0