Display ellipsis on long text HTML and CSS

by Posted on

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.

Published by adnanafzal565