JSFiddle - React, Tailwind, and code Playground

HTML

<div class="textContainer_Truncate">
  <p>content<br>
    hello<br>
    hello<br>
    hello<br>
      hello<br>
      hello<br>
      hello<br>
      hello<br>
      hello<br>
      hello<br>
      hello<br>
      hello<br>
      hello<br>
      hello<br>
      hello<br>
      hello<br>
      hello<br>
    </p>
</div>

JavaScript

$(document).ready(function () {
      var maxheight=30;
      var showText = "...";
      var hideText = "";

      $('.textContainer_Truncate').each(function () {
        var text = $(this);
        if (text.height() > maxheight){
            text.css({ 'overflow': 'hidden','height': maxheight + 'px' });

           var link = $('<i class="tmaxt">' + showText + '</i>');
            var linkDiv = $('<div></div>');
            linkDiv.append(link);
            $(this).after(linkDiv);

            $('.textContainer_Truncate').hover(function (event) {
              event.preventDefault();
              if (text.height() > maxheight) {
                 // $(this).html(showText);
                 $('.tmaxt').show();
                 text.css('height', maxheight + 'px');
              } else {
                 $('.tmaxt').hide();
                text.css('height', 'auto');
              }
            });
        }       
      });
   });