JSFiddle - React, Tailwind, and code Playground

by Marcus

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<div class="frame" id="show01">
   Lorem ipsum a bunch of times which
</div>

<div class="frame" id="show02">
   Lorem ipsum a bunch of times which I took out to make this shorter Lorem ipsum a bunch of times which I took out to make this shorter
</div>

<div class="frame" id="show03">
   Lorem ipsum a bunch of times
</div>

<div class="frame" id="show04">
   Lorem ipsum a bunch of times which I took out to make this shorter Lorem ipsum a bunch of times which I took out to make this shorterLorem ipsum a bunch of times which I took out to make this shorterLorem ipsum a bunch of times which I took out to make this shorterLorem ipsum a bunch of times which I took out to make this shorterLorem ipsum a bunch of times which I took out to make this shorterLorem ipsum a bunch of times which I took out to make this shorterLorem ipsum a bunch of times which I took out to make this shorterLorem ipsum a bunch of times which I took out to make this shorterLorem ipsum a bunch of times which I took out to make this shorterLorem ipsum a bunch of times which I took out to make this shorterLorem ipsum a bunch of times which I took out to make this shorterLorem ipsum a bunch of times which I took out to make this shorterLorem ipsum a bunch of times which I took out to make this shorter
</div>

<div class="frame" id="show05">
   Lorem ipsum a bunch of times which I took out to make this shorterLorem ipsum a bunch of times which I took out to make this shorterLorem ipsum a bunch of times which I took out to make this shorterLorem ipsum a bunch of times which I took out to make this shorterLorem ipsum a bunch of times which I took out to make this shorterLorem ipsum a bunch of times which I took out to make this shorterLorem ipsum a bunch of times which I took out to make this shorter
</div>

<div class="frame" id="show06">
   Lorem ipsum a bunch of times which I took out to make this shorter
</div>

CSS

.frame{
  width:300px;
  height:100px;
  border:1px solid #000;
  margin: auto;
  margin-top:20px;
  clear:both;
  }

JavaScript

$(function(){
	alert();
	$('.frame').each(function(){
		var limit = 100;
		var item = $(this).text(); //it is return a string

		if (item.length > limit){
			$(this).text(item.substring(0, (limit + 1)) + "...");
		}else{
			$(this).text(item);
		}
	});  
});