<div class="text">
<p>Curabitur <b>sit</b> amet lorem tincidunt lacus imperdiet varius. Quisque tellus justo, blandit id malesuada quis, maximus ut risus. Sed et semper nunc. Suspendisse mollis diam sit amet nisl ultricies tempor. Quisque nunc leo, gravida non risus pulvinar, dignissim vulputate nulla. Vestibulum congue feugiat nisl in accumsan. Nullam et mauris eget nulla sagittis ornare vel eu augue. Sed condimentum elit nec hendrerit interdum. Mauris laoreet, purus at pulvinar congue, sem lacus faucibus ante, nec fermentum leo nisi sed metus. Curabitur euismod urna purus, vitae pharetra elit volutpat vitae. Cras condimentum libero ligula, a tristique dui congue non. Sed magna tellus, suscipit nec tincidunt non, scelerisque nec lorem. Quisque at auctor purus. <b>Duis</b> eu tortor in nisi consectetur congue.</p>
<p>Cras semper dui turpis, id vestibulum dolor faucibus nec. Donec faucibus non est sed commodo. Nullam nec nisi et velit ultrices molestie fringilla a arcu. Vestibulum id mollis nunc. Proin sodales ante ut arcu porttitor, at maximus ex finibus. Duis mi urna, hendrerit eleifend eleifend sed, feugiat ac orci. Vestibulum condimentum lorem felis, pharetra vestibulum ex sollicitudin non. Donec accumsan justo libero, a euismod quam sodales a.</p>
</div>
const limit = 255;
const textSelector = '.text';
$(document).ready(function(){
$(textSelector).each(function(){
const textBlock = $(this);
if($(this).text().length > limit){
const allText = $(this).html();
$(this).html($(this).html().substr(0, limit) + '... <a href="#" class="read-more">Показать полностью</a>');
$(this).find('a.read-more').on('click', function(e){
e.preventDefault();
textBlock.html(allText);
});
}
})
});
This Pen doesn't use any external CSS resources.