JSFiddle - React, Tailwind, and code Playground
HTML
<div>
Hi. Can anyone tell me how its possible to limit the amount of text characters in a div. I want to be able to limit to say 200 characters, then display a 'read more' link, when clicked it slides down the rest of the text. Hi. Can anyone tell me how its possible to limit the amount of text characters in a div. I want to be able to limit to say 200 characters, then display a 'read more' link, when clicked it slides down thides down the rest of the text.
</div>
<br />
<div>
Hi. Can anyone tell me how its possible to limit the amount of text characters in a div. I want to be able to limit to say 200 characters, then display a 'read more' link, when clicked it slides down the rest of the text. Hi. Can anyone tell me how its possible to limit the amount of text characters in a div. I want to be able to limit to say 200 characters, then display a 'read more' link, when clicked it slides down the rest of the text. Hi. Can anyone tell me how its possible to limit the amount of text characters in a div. I want to be able to limit to say 200 characters, then display a 'read more' link, when clicked it slides down the rest of the text.
</div>
<br />
<div>
Hi. Can anyone tell me how its possible to limit the amount of text characters in a div. I want to be able anyone tell me how its possible to limit the amount of text characters in a div.
</div>
<br />
<div>
Hi. Can anyone tell me how its possible to limit the amount of text characters in a div. I want to be able to limit to say 200 characters, then display a 'read more' link, when clicked it slides down the rest of the text. Hi. Can anyone tell me how its possible to limit the amount of text characters in a div.
</div>
CSS
.hidden { display: none; }
.readmore { margin: 0 5px;}
JavaScript
$(function () {
var maxL = 200;
$('div').each(function (i, div) {
var text = $(div).text();
if(text.length > maxL) {
var begin = text.substr(0, maxL),
end = text.substr(maxL);
$(div).html(begin)
.append($('<a class="readmore"/>').attr('href', '#').html('...'))
.append($('<div class="hidden" />').html(end));
}
});
})