JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://dotdotdot.frebsite.nl/js/jquery.dotdotdot-1.2.1.js"></script>
<div id="wrapper">This is a long string of test</div>
<div id="wrapper">This is a long string of test</div>
<div class="wrapper">This is a long string of test</div>
<div class="wrapper">This is a long string of test</div>
CSS
div {
width: 15%;
height: 3.75rem;
margin-bottom: 25px;
border: 1px solid #ccc;
}
JavaScript
$(document).ready(function() {
$("#wrapper").dotdotdot({
ellipsis: '... ',
/* Whether to update the ellipsis: true/'window' */
watch: window,
/* How to cut off the text/html: 'word'/'letter'/'children' */
wrap: 'letter'
}); // This only runs on the first element
$(".wrapper").dotdotdot({
ellipsis: '... ',
/* Whether to update the ellipsis: true/'window' */
watch: window,
/* How to cut off the text/html: 'word'/'letter'/'children' */
wrap: 'letter'
}); // This runs on all elements
})