0
164
ViewsMostrar el botón "leer más" después de un número específico de líneas con JS
Quiero que mis párrafos tengan 3 líneas como máximo. Si va más allá de eso, muestro un botón "leer más".
El botón "leer más" debe estar oculto para la primera publicación.
Sé cómo limitar los párrafos usando CSS, pero tengo problemas para mostrar/ocultar el botón "leer más".
// CSS code to limit paragraphs to 3 lines: .post-p { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; /* number of lines to show */ -webkit-box-orient: vertical; line-height: 16px; /* fallback */ max-height: 48px; /* fallback */ }Estoy tratando de usar la función .height() de jQuery para acceder a la altura del párrafo, pero siempre imprime '16', que supongo que es la altura de línea que configuré en el código CSS anterior. ¿Hay otra forma de verificar la altura o el número de líneas de un párrafo?
Nota adicional: estoy usando EJS para enviar una serie de objetos de publicación desde mi archivo app.js.
<% posts.forEach(function(post) { %> <div> <p class="post-p"><%= post.content %></p> <a class="read-more-btn" href="/posts/<%=post._id%>">Read More...</a> <script type="text/javascript"> console.log($('.post-p').height()); </script> </div> <% }); %> // Extra note: I removed the h1 tag from the image I linked to simplify the code.2 answers
Answer question0
Tenga en cuenta que line-clamp aún no tiene una gran compatibilidad con todos los navegadores (consulte https://caniuse.com/?search=line-clamp ). Puede que sea mejor que cree los puntos suspensivos usted mismo.
Puede obtener la altura en píxeles de un elemento usando esto:
var clientHeight = document.getElementById('my-element').clientHeight;0
Editar: funcionó gracias a @Alexander van Oostenrijk. Aquí está mi solución a continuación.
<% posts.forEach(function(post) { %> <div class="post-div"> <h1><a href="/posts/<%=post._id%>"><%= post.title %></a></h1> <p class="post-p"><%= post.content %></p> <a class="read-more-btn" href="/posts/<%=post._id%>">Read More...</a> </div> <% }); %> <script type="text/javascript"> $('.post-div').each(function(i, obj) { if (obj.children[1].clientHeight < 48) { // post-p $(obj.children[2]).hide(); // read-more-btn } }); </script>