Checkout my CSS Grid By Example and Getting Started With React video courses on Skillshare. Sign up now and get one free month of Skillshare.

Using Ellipsis to truncate long text lines in CSS

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 truncate the text after multiple lines but there are a bit more troublesome to implement.

Home Screencasts Best of Newsletter Search X