В текстовом блоке показываем фиксированное число строк и добавляем кнопку «Читать полостью»
Скопировано
<div class='text_block'>
Ясность нашей позиции очевидна: перспективное планирование прекрасно подходит для реализации существующих финансовых и административных условий. Идейные соображения высшего порядка, а также постоянное информационно-пропагандистское обеспечение нашей деятельности влечет за собой процесс внедрения и модернизации укрепления моральных ценностей. Как принято считать, явные признаки победы институционализации, которые представляют собой яркий пример континентально-европейского типа политической культуры, будут разоблачены. Современные технологии достигли такого уровня, что реализация намеченных плановых заданий предоставляет широкие возможности для прогресса профессионального сообщества. С учётом сложившейся международной обстановки, убеждённость некоторых оппонентов выявляет срочную потребность анализа существующих паттернов поведения!
</div>
Скопировано
.text_block {
line-height: 1.2;
margin: 0 0 10px;
}
.hidden {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
}
.show_more {
text-decoration: underline;
cursor: pointer;
}
Скопировано
// вычисляем число строк в блоке и добавляем кнопку если их более трех
var height = $( '.text_block' ).height();
var line_height = parseInt( $( '.text_block' ).css( 'line-height' ), 10 );
var rows = Math.trunc( height / line_height );
if( rows > 3 ) {
$( '.text_block' ).addClass( 'hidden' ).after( "<span class='show_more btn brown'>Читать полостью</span>" );
}
// при клике показываем текст полостью
$(document).on( 'click', '.show_more', function(e) {
$(this).hide().prev().removeClass( 'hidden' );
});