šŸ“• LangChain for JavaScript developers is now out!
Build 5 Next.js apps with ChatGPT integrated features using LangChain.

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 add ellipsis (the 3 dots) on multiple lines in CSS.

šŸ“– 50 Javascript, React and NextJs Projects

Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.

šŸ“– 50 Javascript, React and NextJs Projects

Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.


Leave a Reply

Your email address will not be published. Required fields are marked *