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>

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) + '...');
    }
  });

});


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');