Tengo este caso quiero ocultar el botón si no hay puntos, si aparecen los puntos mostrar el botón leer más. Necesito que sea de esta manera, después de este ancho aparecen dos líneas y puntos. ¿Hay alguna manera de hacerlo en Javascript puro? Por favor ayuda
.text { max-width: 400px; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; } .wrapper { display: flex; align-items: end; } button { padding: 0; background: white; border: none; line-height: 3.5; } <div class="wrapper"> <p class="text">Some dummy text hereSome dummy text hereSome dummy text hereSome dummy text hereSome dummy text hereSome dummy text here </p> <button>Read more</button> </div>Esta sería solo una variación usando JS. En este ejemplo, el efecto de ellipsis se simula con un span por lo que el texto se trunca. El texto oculto está usando display: none; y el JS lo alterna para display: inline; . También cambia el HTML en el texto del botón con text.innerHTML = "Read less"; .
function myFunction() { var dots = document.getElementById("dots"); var moreText = document.getElementById("more-text"); var btnText = document.getElementById("myBtn"); if (dots.style.display === "none") { dots.style.display = "inline"; btnText.innerHTML = "Read more"; moreText.style.display = "none"; } else { dots.style.display = "none"; btnText.innerHTML = "Read less"; moreText.style.display = "inline"; } } .wrapper { width: 100%; } .text { max-width: 400px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: auto; -webkit-box-orient: vertical; } #more-text { display: none; } button#myBtn { padding: 0; background: white; border: none; line-height: 3.5; margin: auto; } p { margin: 0; } <div class="wrapper"> <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem<span id="dots">...</span><span id="more-text"> tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p> <button onclick="myFunction()" id="myBtn">Read more</button> </div>