Greetings.

Task: There is a parent block with a fixed width. It has a block with text. The amount of text can be different, but if the number of lines is more than 4, then you need:

  1. Add the button "read more" and when clicked on it, replace it with "close". You can use one button just to change the text, below made for example as I could.
  2. Add a class to the block with text.

In this case, the text can be transferred to a new line, either automatically (based on the width of the block), or by using Enter.

The following resulted approximate version, only without a condition with the number of lines. I understand what has been done poorly, but just to show what is needed in the end.

$(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 answer 1

    Instead of the number of lines, you can take as a basis the height of the block that it will have when it has 4 lines for your design, in this example 4 lines is 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>

    • `if ($ ('. cont'). height ()> 75) {$ ('. cont'). height (75); `ok, let's say not by lines, but by height, be calculated, but can it be done so that the whole thing is calculated based on the font size? The font is set to em and can change its size depending on the screen resolution. - Aaron