1

Приветствую.

Задача: Имеется родительский блок, с фиксированной шириной. В нём блок с текстом. Количество текста можно быть разным, но если количество строк больше 4, то нужно:

  1. добавлять кнопку "читать далее" и при нажатии на неё заменять её "закрыть". Можно использовать одну кнопку просто текст менять, ниже сделал для примера так как смог.
  2. Добавлять класс к блоку с текстом.

При этом, текст можно быть перенесен на новую строку, либо автоматически (исходя из ширины блока), либо с помощью Enter'а.

Ниже привел примерный вариант, только без условия с количеством строк. Понимаю, что сделано убого, но лишь бы показать, что надо в итоге.

$(document).ready(function(){

    $('.open').click(function () {
        $('.cont').addClass('full');
        $('.open').removeClass('visible');
        $('.close').removeClass('hide');
    });
  $('.close').click(function () {
        $('.cont').removeClass('full');
        $('.open').addClass('visible');
        $('.close').addClass('hide');
    });
	
});
.wrap {
  width: 350px;
  padding: 10px;
  background: #ccc;
  
  margin: 50px;
}
.cont {
  height: 80px;
  overflow: hidden;
}
.full {
  height: auto;
}

.open, .hide {
  display: none;
}
.visible {
 display: block; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
   <div class="cont">
   text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text  text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text  text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
  </div>
  <span class="open visible">Читать далее</span> 
  <span class="close hide">Закрыть</span> 
</div>

1 ответ 1

1

Вместо количества строк можно взять за основу высоту блока, которая будет у него, когда в нём 4 строки при вашем дизайне, в данном примере 4 строки - это 75px,

$(document).ready(function(){
    
    if($('.cont').height() > 75){
        $('.cont').height(75);
        $('.open').addClass('visible');
    }
  
    $('.open').click(function () {
        $('.cont').addClass('full');
        $('.open').removeClass('visible');
        $('.close').removeClass('hide');
    });
  $('.close').click(function () {
        $('.cont').removeClass('full');
        $('.open').addClass('visible');
        $('.close').addClass('hide');
    });
	
});
.wrap {
  width: 350px;
  padding: 10px;
  background: #ccc;
  
  margin: 50px;
}
.cont {
  overflow: hidden;
}
.full {
  height: auto !important;
}

.hide {
  display: none;
}
.visible {
 display: block; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
   <div class="cont">
   text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text  text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text  text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
  </div>
  <span class="open hide">Читать далее</span> 
  <span class="close hide">Закрыть</span> 
</div>

1
  • ` if($('.cont').height() > 75){ $('.cont').height(75); ` ок, допустим не по строкам, а по высоте вычислять, но можно ли сделать так, чтобы всё это дело высчитывалось исходя из размера шрифта? шрифт выставлен в em и в зависимсоти от разрешения экрана может изменять свой размер.
    – Aaron
    Commented 28 нояб. 2016 в 13:23

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.