I have this case I want to hide the button if there are no dots, if the dots appear show the read more button. I need it to be this way two lines and dots appear after this width. Is there a way to do it on Javascript pure? Please help
.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>This would be just one variation using JS. In this example, the ellipsis effect is simulated with a span so the text is truncated. The hidden text is using display: none; and the JS toggles it to display: inline;. It also changes the HTML in the button text with 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>