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

CSS ellipsis (the 3 dots) on multiple lines

Some while ago I've written an article on how to use the text-overflow CSS property to add an ellipsis (the 3 dots) when truncating long lines of text.

That approach worked only for one single line of content. But how can we get the same result while displaying multiple lines? How can we add an ellipsis after multiple lines of text in CSS?

Let's say we have the following html paragraph:

<p class="truncate-to-2-lines">
  Lorem Ipsum is simply dummy text
  of the printing and typesetting industry. 
  Lorem Ipsum has been the industry's standard
  dummy text ever since the 1500s, when an
  unknown printer took a galley of type and 
  scrambled it to make a type specimen book. 
  It has survived not only five centuries, but also 
  the leap into electronic typesetting, 
  remaining essentially unchanged.</p>

This is way bigger than just two lines, right? Let's see how we can solve this with modern CSS:

.truncate-to-2-lines {
  width: 300px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

The key here is the -webkit-line-clamp property. It will only work in combination with display: -webkit-box or display:-webkit-inline-box and -webkit-box-orient:vertical.

Using it we can truncate a text to a specific number of lines.
printscren of CSS ellipsis for multiple lines

Made this codepen to test the truncation with ellipsis on multiple lines.

The support for -webkit-line-clamp is pretty good, being available in all major browsers.

šŸ“– 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 *