Вы можете использовать JavaScript-метод substring() в сочетании с jQuery-методами append() и html(), чтобы обрезать абзацы текста и добавлять ссылку «читать дальше» в конце, если количество символов внутри абзаца превышает определенную длину.
jQuery-код в следующем примере просто обрежет абзац и в конце добавит ссылку «Подробнее».
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Add Read More Link</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
var maxLength = 300;
$(".show-read-more").each(function(){
var myStr = $(this).text();
if($.trim(myStr).length > maxLength){
var newStr = myStr.substring(0, maxLength);
var removedStr = myStr.substring(maxLength, $.trim(myStr).length);
$(this).empty().html(newStr);
$(this).append(' <a href="javascript:void(0);" class="read-more">read more...</a>');
$(this).append('<span class="more-text">' + removedStr + '</span>');
}
});
$(".read-more").click(function(){
$(this).siblings(".more-text").contents().unwrap();
$(this).remove();
});
});
</script>
<style>
.show-read-more .more-text{
display: none;
}
</style>
</head>
<body>
<p>Это параграф.</p>
<p>Это другой параграф.</p>
<p class="show-read-more">Это длинный параграф...</p>
</body>
</html>
