He encontrado un problema. Espero que cuando el texto tenga menos de cinco líneas, el símbolo V del botón desaparezca y la función de hacer clic en el texto para expandir también se cancele, pero cuando el contenido del artículo supere las 5 líneas, el botón se restaurará para ser visible y el artículo se puede expandir haciendo clic en el artículo. Hay muchos artículos, pero como acabo de aprender el programa, no sé cómo completar este efecto en la práctica. Espero poder brindarme una forma de aprender. ¡Gracias por tu ayuda!
$('.show').click(function(){ $(this).toggleClass('rotate'); // remove more button $('.content').toggleClass('show-all'); // add class .show-all for .content when clicked on more button }); $('.content').click(function(){ $(this).toggleClass('show-all'); }) .content { height: 110px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 5; } .content.show-all{ height:auto; overflow:visible; text-overflow: none } .more { text-align: center; } .show{ text-decoration: none; color: #222; transform:rotate(0deg); } .rotate{ transform: rotate(20deg) } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="demo"> <p class="content"> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Suscipit odit fugit debitis, quibusdam esse eius ullam odio cupiditate cumque nostrum asperiores libero, sapiente aliquid animi? Saepe eligendi doloremque possimus. Velit sunt earum aliquam debitis quos eum atque nemo eius, hic quas doloremque facere et voluptatibus voluptatum eaque corrupti impedit ipsum beatae incidunt sapiente aliquid animi? Saepe eligendi doloremque possimus. Velit sunt earum aliquam debitis quos eum atque nemo eius, hic quas doloremque facere et voluptatibus voluptatum eaque corrupti impedit ipsum beatae incidunt sapiente aliquid animi? Saepe eligendi doloremque possimus. Velit sunt earum aliquam debitis quos eum atque nemo eius, hic quas doloremque facere et voluptatibus voluptatum eaque corrupti impedit ipsum beatae incidunt </p> <div class="more"> <a href="javaScript:;" class="show">V</a> </div> </div>