JSFiddle - React, Tailwind, and code Playground

by Superman

HTML

<html>
<head>
 <title>Truncation Plugin Test</title>
 <script src="js/jquery.js" type="text/javascript"></script>
 <script src="js/jquery.truncate.js" type="text/javascript"></script>
 
 <script type="text/javascript">
  $().ready(function() {
   $('.tip').truncate();
  });
 </script>
</head>
<body>
 <div class="tip" style="width:200px;background-color:#ccc;padding:10px;">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam fringilla, purus a ultrices blandit,
  odio ante scelerisque neque, vitae imperdiet odio velit ac nisl. Sed tortor metus, placerat condimentum,
  feugiat in, feugiat adipiscing, mi. Donec pulvinar sem vitae leo. Vestibulum eget lectus et ligula hendrerit
  pharetra. Sed porta justo ac nisl. Aliquam nisi erat, pellentesque sed, sagittis eu, fringilla sit amet,
  dolor. Nam ac mi. Pellentesque pede purus, mattis aliquet, semper nec, cursus a, orci. Duis bibendum nibh
  ac massa. Integer eu tortor. Aenean convallis quam at nunc. Nunc mollis tincidunt nisi. Suspendisse mauris
  odio, iaculis ut, feugiat vitae, ultrices in, tortor. Quisque at elit. In hac habitasse platea dictumst.
 </div>
</body>
</html>

JavaScript

/*$.fn.truncate = function(options){
 
    return this.each(function(){
    
    
    });
    
}*/

(function($){

    $.fn.truncate = function(options){

        var defaults = {
        
            length:300,
            mintrail:20,
            moreText:"more",
            lessText:"less",
            ellipsisText:"..."
          };    
        
        var options = $.extend(defaults, options);
        
        return this.each(function(){
        
            obj = $(this);
            var body = obj.html();
            
            if(body.length > options.length + options.mintrail){
             
                var splitLocation = body.indexof(''. options.length);
                var str1 = body.substring(0, splitLocation);
                var str2 = body.substring(splitLocation, body.length - 1);
                
                obj.html(str1 + '<span class="truncate_ellipsis">' + options.ellipsisText + '</span>' + '<span class="truncate_more">' + str2 + '</span>');
                
                obj.find('.truncate_more').css("display", "none");
                obj.append('<div class="clearboth">' + '<a href="#" class="truncate_more_link">' + options.moreText + '</a>' + '</div>');
                
                var moreLink = $('.truncate_more_link', obj);
                var moreContent = $('.truncate_more', obj);
                var ellipsis = $('.truncate_ellipsis', obj);
                
                moreLink.click(function(){
                
                    if(moreLink.text() ==  options.moreText){
                     
                        moreContent.show('normal');
                        moreLink.text(options.lessText);
                        ellipsis.css('display', 'none');
                        
                    }else{
                     
                        moreContent.hide('normal');  
                        moreLink.text(options.moreText);
                        ellipsis.css('display', 'inline');
            ...