Display ellipsis on long text HTML and CSS
In this article, I am going to show you how you can show an ellipsis on a long text using HTML and CSS. We will be using just 4 CSS properties.
Video tutorial:
For example, you have a paragraph like this:
<p>A quick brown fox jumps over the lazy dog.</p>
Then give it a width and you will start seeing it in wrap.
<p style="width: 200px;">A quick brown fox jumps over the lazy dog.</p>
To disable the wrap, you can give the following property:
<p style="width: 200px;
white-space: nowrap;">A quick brown fox jumps over the lazy dog.</p>
Last thing you need to do, is to show ellipsis. To do that, just give the following 2 properties.
<p style="width: 200px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: block;">A quick brown fox jumps over the lazy dog.</p>
So that’s it. That’s how you can show an ellipsis on a long text using just HTML and CSS. If you face any problem in following this, kindly do let me know.