Add Three Dots If Text Is Too Long Using Css

To add three dots if the text is too long, we use the “text-overflow: ellipsis” in Css

Writing a long paragraph text in your project is great as it helps to give a full meaning of the message you are trying to pass to your audience.

However, the text might take too much space and you may want to truncate it and add three dots if the text is too long.

Most of the time, people write only a few words and add a link as the last word of the text.

That way, when the link is clicked, it takes you to a new page where you can read the full text.

so in this article, We will learning how you can add three dots if the text is too long.

Example

Html

Assuming we have a long paragraph of over 50 words. ("Dormy text generated using lorem")  

<p class="long-text">Hello, it's really a pain to be followed. And the pain and error of following some one, none of us are said to provide for the work that he hates when he flees; Let it be understood that the duties of choosing are charged with it! No, it is a matter of fact. I will explain the laborious routine of refusing to pay for the work, and the pleasure of choosing the times escapes the exercise unless it takes some!</p>

In our Css, we can truncate the long text by adding three dots at the end of the one sentence to indicate that there are more words other than what’s been displayed.

css
.long-text {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

When you add the CSS above, you would notice that the text have been truncated and there are three dots included at the end to indicate the continuation of the text as shown in the image below.

You can use this together with an image.

For instance, if you have an item with more description and you want to display just a few words. with this, you can make the item to be a link and when you click on either the picture or text, it will take you to a page where you can read the full text untruncated.