Using Ellipsis to truncate long text lines in CSS

DanielAugust 19, 2021January 25, 2023

I use grammarly.com to correct the articles from this blog given that English's not my primary language. In this app, if you set a longer title a document you will get the ellipsis sign after a specific length.

This can be done quite easily in CSS thanks to the declaration text-overflow: ellipsis;.

Hoever keep in mind that for this to work you will also need to:

• set a clear width to the text so that there is a limit for how much the text can expand
• and also a nowrap alongside overflow: hidden so that the text will stay on one line and will not go outside the container

The full declaration for a truncation class may look like this:

.truncate-to-300 { 
    text-overflow: ellipsis; 
    width: 300px;
    white-space: nowrap; 
    overflow: hidden; 
}

And to get the output from the picture we can just to:

<h1 class="truncate-to-300">A CSS tricky situation- the order of the CSS class names in the HTML tags</h1>

There are also techniques that allow to add ellipsis (the 3 dots) on multiple lines in CSS.