Найденное решение для ограничения текста в элементе div и возможности разворачивания блока по клику выглядит следующим образом:
HTML:
<div class="truncate-text">
<p>Тут какой-то текст длиной до 2000 символов, но нужно показывать только первые 200 символов. По событию onClick блок должен развернуться. А если блок уже развернут - свернуться.</p>
</div>
CSS:
.truncate-text{
height: 130px;
overflow: hidden;
position: relative;
}
.truncate-text.opener {
height: auto;
}
.truncate-text:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 40px;
background: linear-gradient(180deg, transparent, white 50%);
}
.truncate-text.opener:after {
opacity: 0;
}
Javascript (jQuery):
<script>
$('.truncate-text').click(function(){
$('.truncate-text').toggleClass('opener');
});
</script>