JSFiddle - React, Tailwind, and code Playground

by anikettiwari

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="maincontent">
<div class="content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
</div>
<div class="txtcol"><a>Show More</a></div>
</div>

<div class="maincontent">
<div class="content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been Lorem Ipsum has been Lorem Ipsum has been Lorem Ipsum has been 
</div>
<div class="txtcol"><a>Show More</a></div>
</div>


<div class="maincontent">
<div class="content">
Lorem Ipsum is simply 
</div>
<div class="txtcol"><a>Show More</a></div>
</div>

CSS

.content {
    width:100px;
    overflow: hidden;
    white-space:normal;
    text-overflow: ellipsis;
    line-height: 1.2em;
    /* max-height = line-height (1.2) * lines max number (3) */
    max-height: 3.6em; 
    /* fix problem when last visible word doesn't adjoin right side  */
    text-align: justify;  
}
.txtcol{
  display:none;
  color:blue;
  cursor:pointer;
}
.maincontent{
  display:inline-block;
  vertical-align:top;
  border: 1px solid gray;
}

JavaScript

$(document).ready(function(){
  $(".content").each(function(){
    if($(this).height() < $(this)[0].scrollHeight){
      $(this).parent().find(".txtcol").show();
      $(this).toggleClass("truncate");
    }
  });
  $(".txtcol").click(function(){
    if($(this).prev().hasClass("truncate")) {
    				$(this).parent().find(".content").css("max-height", $(this).parent().find(".content")[0].scrollHeight);
            $(this).children('a').text("Show Less");
        } else {
    				$(this).parent().find(".content").css("max-height", "3.6em");
            $(this).children('a').text("Show More");
        }
  $(this).prev().toggleClass("truncate");

  });
});