JSFiddle - React, Tailwind, and code Playground

by Ying Chor Ding

HTML

<p class="dotdot">Lorem ipsum dolor sit amet consectetur adipscing etlist. Consectetur adipscing etlistLorem ipsum dolor sit amet.Consectetur adipscing etlistLorem ipsum dolor sit amet.Consectetur adipscing etlistLorem ipsum dolor sit amet.Consectetur adipscing etlistLorem ipsum dolor sit amet.</p>
<p class="dotdot">Lorem ipsum dolor sit amet consectetur adipscing etlist. Consectetur adipscing etlistLorem ipsum dolor sit amet.Consectetur adipscing etlistLorem ipsum dolor sit amet.Consectetur adipscing etlistLorem ipsum dolor sit amet.Consectetur adipscing etlistLorem ipsum dolor sit amet.</p>
<p class="dotdot">Lorem ipsum dolor sit amet consectetur adipscing etlist. Consectetur adipscing etlistLorem ipsum dolor sit amet.Consectetur adipscing etlistLorem ipsum dolor sit amet.Consectetur adipscing etlistLorem ipsum dolor sit amet.Consectetur adipscing etlistLorem ipsum dolor sit amet.</p>
<div class="some-area">Lorem ipsum dolor sit amet consectetur adipscing etlist. Consectetur adipscing etlistLorem ipsum dolor sit amet.Consectetur adipscing etlistLorem ipsum dolor sit amet.Consectetur adipscing etlistLorem ipsum dolor sit amet.Consectetur adipscing etlistLorem ipsum dolor sit amet.</div>
<div class="title">Lorem ipsum dolor sit amet consectetur adipscing etlist. Consectetur adipscing etlistLorem ipsum dolor sit amet.Consectetur adipscing etlistLorem ipsum dolor sit amet.Consectetur adipscing etlistLorem ipsum dolor sit amet.Consectetur adipscing etlistLorem ipsum dolor sit amet.</div>

<div id="stuff">a reallly really really long titleasdfasdfasdfasdfasdfasdfasdfadsf</div>
<div class="text">
    123456789012345
</div>
<div class="text">
    123456789012345
</div>
<div class="text">
    1234567890
</div>
<div class="text">
    123456789012345
</div>

CSS

.dotdot{ padding:5px;  
 width: 100%;
  
}

JavaScript

$(document).ready(function(){
$.each($('.dotdot').not(':empty'), function(i,v){
    var count = parseInt($(this).text().length);
    var maxChars = 5;
    if(count > maxChars){
      var str = $(this).text();
      var trimmed = str.substr(0, maxChars);
      $(v).text(trimmed + '...');          
    }
  });
  $("div.some-area").text(function(index, currentText) {
    return currentText.substr(0, 105); 
	});
  
  $(".title").each(function(i){
    len=$(this).text().length;
    if(len>5)
    {
      $(this).text($(this).text().substr(0,5)+'...');
    }
  }); 
  $('div.text').text(function(i, text) {
    var t = $.trim(text);
    if (t.length > 10) {
        return $.trim(t).substring(0, 10) + "...";
    }
    return t;
});

});


function cutString(id){    
     var text = document.getElementById(id).innerHTML;         
     var charsToCutTo = 10;
        if(text.length>charsToCutTo){
            var strShort = "";
            for(i = 0; i < charsToCutTo; i++){
                strShort+= text[i];
            }
            document.getElementById(id).title = "text";
            document.getElementById(id).innerHTML = strShort + "...";
        }            
     };
cutString('stuff');