JSFiddle - React, Tailwind, and code Playground

HTML

<div id="textparent">
<div id="text">
  {{content}}   kj hgk ja
    adf adfg dgdfg  ajkdhg akdfgadg ajkdhfk adfgadg
    fdgs gsdg f jdf gsdj sdfgj asdj fdsfgdfgj
</div>
</div>

CSS

#text{    
      width:100%;
      position:relative;
      height:auto;
      text-overflow:ellipsis;
      font-size:35px;
      line-height:1.1;
      display:block;
      display: -webkit-box;
      -webkit-box-orient: vertical;
	  -webkit-line-clamp:3;
	  overflow:hidden;
	  margin:0 auto;
	  box-sizing:border-box;
 }
.clamp:after {
background: linear-gradient(to right, rgba(255, 255, 255, 0), #eeeeee 50%) repeat scroll 0 0 rgba(0, 0, 0, 0);
bottom: 0;
content: "...";
padding: 0 5px 1px 25px;
position: absolute;
right: 0;}

.clamp {
height: 5.6em;
line-height: 1.4em;
overflow: hidden;
position: relative;}
      
      #textparent{
      margin:0 auto;
      width:300px;
      background:#eee;
      top:50px;
      padding:10px;
      height:auto;
      text-align:center;
      position:relative;
      height:100px;
      display:-webkit-box;
	  -webkit-box-pack:center;
	  -webkit-box-align:center;
      }

JavaScript

var t = $('#text');
  var font_size = Number(t.css('font-size').replace('px', ''));
  var line_height = Number(t.css('line-height').replace('px', ''));
  var min_h = line_height;

  var shrink_rate = 3;
  var num_line_to_show = Number(t.css('-webkit-line-clamp')) || 3;
  var max_h = line_height * num_line_to_show * font_size + 5;

  var h = $('#text').height();
  var min_font_size = 20;
  var is_ff = navigator.userAgent.toLowerCase().indexOf('firefox');

if (h > min_h + 1){
	  t.css({'font-size' : min_font_size}); 
      if(is_ff > -1){         
          var txt_max_h = ((line_height-font_size) / num_line_to_show)*min_font_size * num_line_to_show;
          
         if (t.height() > txt_max_h){
             t.height((min_font_size * num_line_to_show) + 5);            
             t.addClass('clamp');
          }
      }
  }
if(is_ff > -1){
     t.css({top: ($('#textparent').height() - t.height()) / 2});
 }