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 *

Home Screencasts Best of Newsletter Search X

📖 50 Javascript, React and NextJs Projects

Hi friend! Before you go, just wanted to let you know about the 50 Javascript, React and NextJs Projects FREE ebook.

One of the best ways to learn is by doing the work. Choose from 8 project categories and get started right away:

  • Business & Real-World
  • Games & Puzzles
  • Fun & Interesting
  • Tools & Libraries
  • Personal & Portfolio
  • Project Add-Ons
  • Productivity
  • Clones

Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects complete with project briefs and wireframes!

Keep building and level up! Get all projects as an ebook right to your inbox!

X