In my div, I have added 2 elements - a button and a span:
<div class="container">
<button>Click Here</button>
<span class="content">Explore More</span>
</div>
To the span element, I've assigned some styling rules to create an ellipsis effect:
div.container {
width: 50%;
border: 2px dashed teal;
}
span.content {
border: 2px solid green;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
I intentionally set the width of the outer div to 50% for easy replication. You can view and test this code on this fiddle. How can I prevent the span from moving down and instead show an ellipsis?