How to use suspension points to hide the rest of a text with CSS

Let's Use overflow, text-overflow, and white-space.

Imagine a <p></p> tag:

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dolor sit amet consectetur adipiscing 
  elit ut aliquam. Tristique sollicitudin nibh sit amet. In fermentum posuere urna nec tincidunt praesent semper feugiat. Cum sociis natoque penatibus et magnis dis 
  parturient.
</p>

This text is very long. Let's add a maximum width with max-width:

p {
    max-width: 300px;
}

Our objective now is to limit our text to a single line. To achieve this, we will apply the following style:

p {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

We have several properties:

• max-width - To set a maximum width not to exceed;
• overflow - Which hides the text that overflows;
• text-overflow - Describes what the browser should do if the text overflows onto multiple lines;
• white-space - Controls how whitespace is handled (we don't want line breaks if there is a space, so the ellipsis works).

Congratulations! You now know how to display ellipsis at the end of text!