There is a block in which there is a description of the goods. Is it possible to do it using CSS properties, if the text is larger than a block, then a part of it is hidden and a button appears, by clicking on which the block with the text opens completely. Now in my head only option using overflow: hidden and js or label input. change the height of the block.

    2 answers 2

    You can do it like this

    button {outline: none;} .text { display: block; width: 300px; height: 10px; border: 1px solid black; padding: 5px; margin-top: 5px; outline: none; overflow: hidden; } .text:focus, button:focus ~ .text {height: auto;} 
     <div class="block"> <button>Кнопка</button> <div class="text" tabindex="0"> Я люблю овый год! В этот день случаются чудеса. Я желаю вам в новом году успехов, счастья, любви, много репутации на StackOverflow, новых проэктов и конечно же денег. С наступающим! </div> </div>

      If you just want a button to click on it, then you cannot do without js. In pure CSS, you can do the following: by default, set the block to some strict height and overflow: hidden, and on hover change the height to auto.

       #block { border: 1px solid black; width: 200px; height: 100px; overflow: hidden; padding: 5px 10px; font-size: 14px; } #block:hover { height: auto; cursor: pointer; } 
       <div id="block"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div>

      • It is possible and with the help of css to make a button, since they make modal windows on pure css. - Abmin